axios 是什么?
axios 基于Promise API 设计,支持浏览器端,nodeJS服务端,这里介绍的是浏览器端(XMLHttpRequest)
axios 提供了哪些功能?
axios的API很丰富,除了常用的请求方法外,还提供了以下功能:
全局数据请求、响应的拦截
转换请求和响应数据
取消请求
客户端支持CSRF/XSRF
可以创建不同的实例,为复杂型场景提供灵活定义
axios配置方面的优先级
axios.method(url, params, config) > axios(config) > axios.defaults
axios原型上提供的method
axios.request(config) // 以下所有的请求方法都是基于这个方法之上扩展的
axios.get(url,params:{}, config) // get请求传参需要多加一个params这个key,源码中是基于这个做的处理
axios.delete(url, params, config)
axios.head(url, params, config)
axios.options(url, params, config)
axios.post(url, params, config)
axios.put(url, params, config)
axios.patch(url, params, config)
axios.getUri(url, params, config) // 没用过 好像新增的以前貌似没看到过
安装 axios
npm i axios -S
在项目中使用axios
先在src下建立一个API目录,存放我们项目所有的请求API

在api目录下建立一个index.js,api/index.js
// 引入 axios
import axios from 'axios'
// 做formData格式转换用的,当然您也可以使用encode自己处理
import Qs from 'qs'
axios 的requestHeader 默认采用的是application/json,数据是经过序列化过的postJson。如果需要application/x-www-form-urlencoded;charset=UTF-8 //这种格式的话,需要手动配置一下
// 这种方式是设置当前实例上所有的方法
axios.defaults.headers['Content-Type'] = "application/x-www-form-urlencoded;charset=UTF-8"
// 这样只有post请求是会改变 requestHeader
axios.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded;charset=UTF-8"
有些项目中,后端可能需要我们每个接口传个token给后台,可以这样配置
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // common 是一个对象
设置默认请求域名
axios.defaults.baseURL = "YOUDOMAIN"
拦截器的使用
请求拦截
axios.interceptors.request.use(config => {
// do something...
return config // return是必须的
},error =>{ // 出错的时候
//do something
return Promise.reject(error);
})
响应拦截
axios.interceptors.response.usr(response => {
// do something...
return response.data // return 是必须的
},error =>{ // 出错的时候
//do something
return Promise.reject(error);
)
// 定义一个方法并使用ES6 MODULE抛出
exprot const getData = (params) => axios.get('/api',params)
在组件中调用
vue中
// 引入 api/index
import {getData} from '@/api'
mounted () {
getData(params).then(res => {
// do something..
})
}
// 结合 ansync
async mounted () {
let res = await getData(params)
}
react中
// 引入 api/index
import {getData} from './api/index'
componentDidMount () {
getData(params).then(res => {
// do something..
})
}
// 结合 async
async componentDidMount () {
let res = await getData(params)
}
axios.get('http://localhost:3000/api',params:{},config) // 会覆盖 create创建,defaults 的配置
PS:axios原型的方法优先级是最高的
更新中....