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就可以和后端进行欢快的数据交互了