axios请求配置组件封装

axios数据请求配置

1.创建axios.js配置文件

axios配置一般会复杂很多，此处简单为例

// 本地url
const baseURL = 'http://localhost:8080'
const version = '/api/v1'

// 创建一个axios实例
const instance = axios.create({
    baseURL: baseURL + version,
    timeout: 7000,
    headers: {}
})

// 封装请求拦截器
instance.interceptors.request.use(function (config) {
    // 加token，用于后端鉴权（识别用户）
    config.headers.Authorization = localStorage.getItem('token')
    return config;
}, function (error) {
    return Promise.reject(error);
})

// 封装响应拦截器
instance.interceptors.response.use(function (response) {
    let res = null
    // 数据过滤
    if(response.data) {
        let err = response.data.err
        if(err===0) {
            res = response.data.data
        }else if(err===-1) {
            // 处理token无效的情况
            message.error(response.data.msg)
            localStorage.removeItem('token')
            window.location.reload()
        }else{
            message.error(response.data.msg)
        }
    }
    return res
}, function (error) {
    return Promise.reject(error)
})


export default instance

2.创建api.js文件 专门放置各种请求api的方法

// 引入以上配置的axios文件
import axios from './axios'

export function fetchQQ(params) {
    return axios({
        url: '接口api',
        method: 'GET',
        params
    })
}

跨域配置

vue一般在vue.config.js文件，没有的话自己建一个， react找到webpack.config.js文件，脚手架搭建找到webpackDevSever.config.js文件 找到关键字段配置如下

devServer: {
   proxy: {
   	// 端口号后面第一个字段
     '/api': {
       target: 'https://baidu.com',// 请求的目标地址
       changeOrigin: true // 是否改变请求地址（是否跨域）
      }
   }
}

webpack devServer.proxy配置文档：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

也可以使用 http-proxy-middleware插件，源文档： https://github.com/chimurai/http-proxy-middleware#options

调用配置好的api就可以和后端进行欢快的数据交互了