目录

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 常用语法

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