axios入门

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

未登录，跳转到登录页面