一个简单的Axios基本使用教程-变化吧

二叶草

1214
文章

0
评论

2020年1月24日19:07:39使用教程评论阅读模式

请求类型

GET：从服务器端读取数据
POST：向服务器端添加数据
PUT：更新服务器端已有数据
DELETE：删除服务器端数据

下载

CDN引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

依赖下载

npm install axios

axios特点

基于Promise和fetch封装。

基本Promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

axios常用语法

axios(config) : 通用/最本质的发任意类型请求的方式
axios(url[,config])：可以只指定url发送get请求
axios.request(config)：等同于axios(config)
axios.get(url[,config]：发送get请求
axios.delete(url[,config])：发送delete请求
axios.post(url[,data,config])：发送post请求
axios.put(url[,data,config])：发送put请求
axios.defaults.xxx：请求的默认全局配置
axios.interceptors.request.use()：添加请求拦截器
axios.interceptors.response.use()：添加响应拦截器
axios.create([config])创建一个新的axios(它没有下面的功能)
axios.Cancel()创建取消请求的错误对象
axios.CancelToken()创建取消请求的Token对象
axios.isCancel()是否是一个取消请求的错误
axios.all(promises)批量执行多个异步请求
axios.spread()指定接受所有成功数据的回调函数的方法

axios.defaults

使用axios.defaults.baseURL定义同于的Api接口地址后就不需要重新书写，直接写接口地址就能请求到。

axios.defaults.baseURL = 'http://localhost:3000'
    axios({
        url:'/posts',
    }).then(value => {
        console.log(value.data)
    })

axios.create

根据指定配置创建一个新的axios,每个axios都有自己的配置。新的axios没有取消请求和批量发送请求的方法，其他语法都一致。

项目中有部分接口需要新的配置与另一部分接口需要的配置不太一样。就需要重新创建一个axios来配置不同情况下的请求方式。这下就用到的axios.create

//  这里配置新的axios配置
const instance = axios.create({
    baseURL :'http://localhost:3000'
})
//  直接使用创建出来的insance发请求
instance({
    url:'/posts'
}).then(value => {
    console.log(value.data)
})

axios.interceptors

用于请求/响应时候在没有得到数据前拦截并做出相应的判断。

axios.interceptors.request.use(config =>{
    console.log(config)
    console.log('config')
    //  必须返回config > 基于Promise 需要返回才能串联操作
    return config
},error=>{
    return error
})
axios.interceptors.response.use(response =>{
    console.log(response)
    console.log('response')
    return response
},error=>{
    return error
})
axios.get('http://localhost:3000/posts')
.then(value => {
    console.log(value)
})

如果存在两个请求响应拦截器，执行顺序是 request2 > request1 > response1 > response2 > data。

axios.cancel

用户点击后发接受，数据没有显示出来的时候。又点击其他地方这时候需要取消原先的axios请求。

<button onclick="getReq()">发送请求</button>
<button onclick="cancelReq()">取消发送</button>

let cancel;
function getReq() {
    axios({
        url:'http://localhost:3000/posts',
        cancelToken:new axios.CancelToken(c=>{
            //  c是 取消函数
            cancel = c
        })
    }).then(value => {
        //  发送成功或者发送失败把cancel变成null
        cancel = null;
        console.log(value)
    }).catch(err=>{
        cancel = null;
        console.log(err)
    })
}
function cancelReq(){
    if(typeof  cancel === 'function'){
        cancel('取消发送请求');
    }else{
        console.log('没有可以取消的请求')
    }
}

拦截器+请求取消案例

let cancel;
//  请求拦截
axios.interceptors.request.use(config =>{
    config.baseURL = 'http://localhost:3000'
    //   在准备发请求前，取消未完成的请求
    if(typeof  cancel === 'function'){
        cancel('取消发送请求');
    }
    //  添加一个cancelToken配置。
    //  config.cancelToken 会转成一个Promise对象
    config.cancelToken = new axios.CancelToken(c=>{
        cancel = c
    })
    return config
})

// 响应拦截
axios.interceptors.response.use(response =>{
    cancel = null
    return response
},err=>{
    //  判断是不是取消请求错误
    if(axios.isCancel(err)){
        console.log('请求取消的错误')
        //  中断Promise链接
        return new Promise(()=>{})
    }else{
        cancel = null
        //  向下传递错误
        //  用Promise 给catch抛出错误。
        return Promise.reject(err);
    }
})
function posts() {
    axios({
        url:'/posts',
    }).then(value => {
        console.log(value)
        console.log(value.config)
    }).catch(err=>{
        console.log(err)
    })
}
function comments() {
    axios({
        url:'/comments',
    }).then(value => {
        console.log(value)
    }).catch(err=>{
        console.log(err)
    })
}