axios库从使用入门到进阶

jonnyshao

2019年01月02日 00:17

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原型的方法优先级是最高的

更新中....