Axios的使用

最新推荐文章于 2022-02-10 07:57:24 发布

原创最新推荐文章于 2022-02-10 07:57:24 发布 · 225 阅读

1 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

44 篇文章

订阅专栏

javaScript

36 篇文章

订阅专栏

本文详细介绍了Axios，一个基于Promise的HTTP库，用于浏览器和Node.js环境。Axios提供了诸如自动转换JSON数据、拦截器等功能，简化了HTTP请求。通过实例展示了GET和POST请求的使用，并提及了并发请求的处理。此外，还讨论了其在Express中的应用和与fetch()的对比优势。

Axios是尤雨溪大神推荐使用的，它也是对原生XHR的二次封装。
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Axios安装

安装： npm install axios --save
引入： import Axios from './axios'
使用：Vue.prototype.axios = Axios;（全局注册在使用时可以使用this.$axios使用）

特性：

可以在Node环境中配合Express()使用实现异步的数据交互
支持Promise API，Axios是基于Promise()对象进行的二次封装，完美支持Promise()对象的所有Api是让异步的数据交互变得更加简单，方便
相比fetch（）axios最强大的就是自己完成了请求和相应数据之间的转换，大大减少开发者的工作量
提供自定以拦截器可以自行对Axios进行二次封装，满足不同开发者不同情境下拦截请求和响应
自动转换 JSON 数据

简单使用：

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})

官方的并发案例，感觉它的all方法应该是基于Promise.all()的并发请求：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

具体使用

axios.get('/user?ID=123')
    .then( res => {
         // 请求数据成功并返回数据。
        console.info(res)
    }).catch( e => {
        if(e.response){
        //请求已发出，服务器返回状态码不是2xx。
            console.info(e.response.data)
            console.info(e.response.status)
            console.info(e.response.headers)
        }else if(e.request){
            // 请求已发出，但没有收到响应
            // e.request 在浏览器里是一个XMLHttpRequest实例，
            // 在node中是一个http.ClientRequest实例
            console.info(e.request)
        }else{
            //发送请求时异常，捕捉到错误
            console.info('error',e.message)
        }
        console.info(e.config)
    })
// 等同以下写法
axios({
    url: '/user',
    method: 'GET',
    params: {
        ID: 123
    }
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})

POST

axios.post('/user', {
    firstName: 'Mike',
    lastName: 'Allen'
}).then( res => {
    console.info(res)
}).catch( e => {
    console.info(e)
})
// 等同以下写法
axios({
    url: '/user',
    method: 'POST',
    data: {
        firstName: 'Mike',
        lastName: 'Allen'
    }
}).then( res => {
    console.info(res)
}).catch( e => {
   console.info(e)
})