1、创建目录

在src目录下创建一个api的目录，然后在api目录下创建request.js文件，并引入axios如下：

import axios from "axios"

2、创建一个axios实例

// 第一种创建axios实例方法
const service = axios.create({
    baseURL: 'http://localhost:8888',  // api的base_url
    timeout: 5000  // 请求超时时间
})

// 第二种创建axios示例方法
let service = axios.create({
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
})

也可以在创建时指定请求数据的格式，参考代码如下：

// 创建axios实例
const service = axios.create({
    baseURL: 'http://localhost:8888',  // api的base_url
    timeout: 5000,  // 请求超时时间
    headers: {
        'content-type': 'application/x-www-form-urlencoded'
    }
})

关于POST请求的常见数据格式（content-type）:

• Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
• Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
• Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

3、请求拦截器

这个拦截器会在你发送请求之前运行
我的这个请求拦截器的功能是为我每一次请求去判断是否有token，如果token存在则在请求头加上这个token。后台会判断我这个token是否过期。

// 拦截请求
service.interceptors.request.use(
    config => {
        console.log("request url="+config.url)
        // config.baseURL = '/user/'
        // config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
        config.timeout = 6000
        let token = sessionStorage.getItem('token')
        if (token) {
            config.headers.Authorization = token;
            config.headers = {
                'token': token,
                // 'Content-Type': 'application/x-www-form-urlencoded'
            }
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

4、响应拦截器

// 拦截响应
service.interceptors.response.use(
    response => {
        // 定时刷新token
        console.log(response.data)
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

5、最后把实例导出就行了

export default service

6、在需要的页面导入就可以使用了

import service from './axios'

/* 验证登陆 */
export function handleLogin (data) {
  return service.post('/ds/user/login', data)
}

参考文章：

• https://www.jianshu.com/p/a0c67f4e145e