这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

axios入门

Axios 是一个基于promise网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。

axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

Promise

一种异步编程解决方案

处理回调

then函数的使用

 new Promise((resolve,reject)=>{
  //业务逻辑
  resolve(1);
 }).then(res=>{
     //代码
 }).then(res=>{
     //代码
 })

处理异常

 new Promise((resolve,reject)=>{
  //业务逻辑
  resolve(1);
 }).then(res=>{
     //代码
 }).catch(err=>{
     //产生异常后执行的代码
 })

安装

方式一：引用js

 <script src="./axios.min.js"></script>

方式二：使用nps/cnpm 安装

 npm install axios -S

安装到dependencies(生产环境依赖)

 npm install axios --save
 npm install axios -S

安装到devDependencies(开发环境依赖)

 npm install axios --save-dev
 npm install axios -D

使用axios

 axios.get(url[,config])
 axios.post(url[,config])
 axios.delete(url[,config])
 axios.put(url[,config])
 axios.head(url[,config])
 axios.patch(url[,config])
 axios.options(url[,config])

GET请求

 axios.get('/user',{
   params:{
    ID:12
   }
 })
 .then(function(response){
  console.log(response);
 })
 .catch(function(error){
  console.log(error);
 })

POST请求

axios.post('/user',{
  name:'123',
  password:'123'
})
.then(function(response){
 console.log(response);
})
.catch(function(error){
 console.log(error);
})

请求响应拦截

使用场景

设置自定义请求头

默认携带上次的cookie

添加loading动画（请求发起前显示、完成后隐藏）

统一的错误处理

实现方法

创建axios的实例

const ajax=axios.create(options)

常用参数

headers:设置请求头

timeout:超时的毫秒数

data:POST/PUT/PATCH请求的数据

params:URL中能够的参数

responseType:默认为json

设置自定义请求头

const ajax=axios.create({
 headers:{
  source:'h5',
  'Contene-Type':'application/x-www-form-urlencoded'
 }
})

默认携带上次的cookie

const ajax = axios.create({
 withCredentials:true
})

添加loading动画

请求拦截

axios.interceptors.request,use(function (config){
 // 在发送请求之前做什么
 return config;
},function(error){
 // 对请求错误做什么
 return Promise.reject(error);
});

响应拦截

axios.interceptors.response,use(function (response){
 // 在响应数据做什么
 return response;
},function(error){
 // 对响应错误做什么
 return Promise.reject(error);
});

统一的错误处理

400

参数错误提示

500/504

服务器正忙，网络异常/请求超时

401

未登录，跳转到登录页面

\