axios 简介及在项目中的使用_axios sleep-优快云博客

本文介绍了axios库的基本概念、特点和常用语法，包括基于Promise的请求处理、拦截器的使用以及在Vue项目中的二次封装。通过设置请求拦截器，实现了在请求前添加自定义头部信息，并在响应后控制进度条的显示。同时，文章展示了如何创建具有特定配置的axios实例，以应对不同接口的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 是什么?

是一个基于 promise 的网络请求库，可用在node.js 和浏览器中。在服务端使用原生node.js.http模块，在客户端 (即浏览器端) 使用 XMLHttpRequests。

因为是基于promise的请求库，所以支持promise的API，

       let p = this.$axios.get('/api/just_test');
       console.log(p); // 1 Promise : PromiseStatus = pending
 
        p.then(res=>{   
          console.tiemEnd('x');//5001ms
          console.log(p);// 3 Promise : PromiseStatus = resolved
        });
        p.catch(err=>{
          console.log(p); // 4 Promise : PromiseStatus = reject
        });
 
       console.log('AAAA'); // 2
        
        //输出顺序 1 -> 2 -> 3或4     


       // 后台部分
       def just_test(request):
       time.sleep(5)
       return JsonResponse({'info': 'okok'})

let p = this.$axios.get('/api/just_test') 相当于：

return new Promise( (resolved,reject)=>{
// 调用http库请求数据
}) // 即获取了一个Promise对象，注意，这是同步调用，回调函数才是异步调用。

可以看到后台中设置了时间停止5秒，即用来模拟需要5秒才能获取到数据，这时候该promise对象的状态是pending,即没有完成也没有失败;
过了5秒后，请求数据完成, then回调加入队列中执行;

axios请求返回一个promise对象，和promise中的 API 一致，可以链式调用，支持async 和 await

axios的特点有哪些？

Axios是一个基于 promise 的HTTP库，支持promise所有的API
它可以拦截请求和响应，支持请求／响应拦截器
支持请求取消
它可以转换请求数据和响应数据，并对响应回来的内容自动转换成JSON类型的数据
批量发送多个请求
安全性更高，客户端支持防御XSRF

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.create(config)

1. 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置

2. 新 axios 只是没有取消请求和批量发请求的方法 , 其它所有语法都是一致的

3. 为什么要设计这个语法 ?

(1) 需求 : 项目中有部分接口需要的配置与另一部分接口需要的配置不太一

样 , 如何处理

(2) 解决 : 创建 2 个新 axios, 每个都有自己特有的配置 , 分别应用到不同要

求的接口请求中

Vue项目中 axios 的二次封装

// 对于axios进行二次封装，加上了请求和响应拦截器
import axios from 'axios'
// 引入进度条
import nprogress from 'nprogress'
// start进度条开始,done进度条结束
//引入进度条的样式
import 'nprogress/nprogress.css'
// 在当前模块中引入 store
import store from '@/store'

// 1.利用axios对象的方法create,去创建一个axios实例
// 2. requests就是axios
const requests = axios.create({
    // 配置对象
    // 基础路径,发送请求的时候,所有路径中都加上/api
    baseURL:'/api',
    //代表请求超时的时间
    timeout:5000,
})

// 请求拦截器,在发送请求之前做一些事情
requests.interceptors.request.use((config)=>{
    // config: 配置对象,对象里面有一个属性很重要,即 header请求头
    if(store.state.detail.uuid_token){
        // 给请求头添加一个字段(userTempId):和后端协商一致 表明用户临时身份
        config.headers.userTempId = store.state.detail.uuid_token;
    }
    // 需要携带token给服务器  验证用户身份 在使用游客身份加入购物车的时候使用
    if(store.state.user.token){
        config.headers.token = store.state.user.token;
    }
    // 发请求之前 进度条开始动
    nprogress.start();
    return config
})

// 响应拦截器
requests.interceptors.response.use((response)=>{ 
    // 成功的回调函数: 服务器相应数据回来以后,响应拦截器可以检测到,可以做一些事情

   //  请求成功以后能够拿到相应的数据以后，使进度条结束
    nprogress.done()
   return response.data;
},(error)=>{
    // 响应失败的回调函数
    return Promise.reject(new Error('failed'))
})


// 对外暴露
export default requests