安装axios

 

起手安装axios

 

npm install axios

 

request.js

 

该文件中对axios进行封装

 

import axios from 'axios'

 

const baseURL = 'http://localhost:4000/api'

 

// 创建 axios 实例

 

const service = axios.create（{

 

    baseURL: baseURL, // 请求地址前缀，将自动加在 url 前面

 

    timeout: 6000 // 请求超时时间

 

}）

 

// axios请求拦截器

 

service.interceptors.request.use（config => {

 

    if （localStorage.getItem（'loginToken'）） {

 

        // 请求统一设置header

 

        config.headers.Authorization = localStorage.getItem（'loginToken'）

 

    }

 

    return config

 

}, error => {

 

    return Promise.reject（error）

 

}）

 

// axios响应拦截器

 

service.interceptors.response.use（response => {

 

    return response.data

 

}, error => {

 

    // console.log（'看一看', error.response）

 

    const { status } = error.response

 

    if （status === 401） { // token失效

 

        Message.error（'token失效，请重新登录'）

 

        // 清除token

 

        localStorage.removeItem（'loginToken'）

 

        router.push（'/'）

 

    }

 

    return Promise.reject（error）

 

}）

 

export { service as axios }

 

在axios.create操作中还可以进行其他的一些操作，诸如：

 

根据当前环境切换不同的url（生产环境/开发环境/测试环境）

 

baseURL: process.env.NODE_ENV === 'production' ? 'productApi': 'developApi'

 

1

 

统一请求头配置

 

headers: {

 

        get: {

 

          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'

 

          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来

 

        },

 

        post: {

 

          'Content-Type': 'application/json;charset=utf-8'

 

          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来

 

        }

 

  },

 

跨域、响应码处理

 

提供是否允许跨域的属性——withCredentials: true/false

 

请求响应序列化

 

// 在向服务器发送请求前，序列化请求数据

 

    transformRequest: [function （data） {

 

        data = JSON.stringify（data）

 

        return data

 

    }],

 

    // 在传递给 then/catch 前，修改响应数据

 

    transformResponse: [function （data） {

 

        if （typeof data === 'string' && data.startsWith（'{'）） {

 

            data = JSON.parse（data）

 

        }

 

        return data

 

    }]

 

同样，拦截器中也可以自定义更多的内容

 

api.js

 

import { axios } from './request'

 

const api = {

 

    user: '/user/getUsers'

 

}

 

export default api

 

export function getUsersApi（param） {

 

    return axios（{

 

        url: api.user,

 

        method: 'post',

 

        data: param

 

    }）

 

}