目录

axios 是什么?

axios的特点有哪些？

axios 常用语法

axios.create(config)

Vue项目中 axios 的二次封装

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的特点有哪些？

  1. Axios是一个基于 promise 的HTTP库，支持promise所有的API
  2. 它可以拦截请求和响应，支持请求／响应拦截器
  3. 支持请求取消
  4. 它可以转换请求数据和响应数据，并对响应回来的内容自动转换成JSON类型的数据
  5. 批量发送多个请求
  6. 安全性更高，客户端支持防御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