Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
特点：
-
从浏览器中创建XMLHttpRequests 从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF
支持多种请求方式：
axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
一、axios的安装：需要安装运行时依赖，因为环境上线也要使用
1、cnpm install axios --save
二、axios发送网络请求
1、导入axios：在对应的组件中导入此插件
App.vue
import axios from 'axios'
2、axios全局配置进行网络请求，配置全局默认属性
<script>
import axios from 'axios'
export default {
name:'App',
components:{
},
data(){
return{
result:''
}
},
created() {
console.log('开始axios网络请求，初始化......');
一、使用全局的配置在进行网络请求~~~~
1.axios是支持promise的，会调用内部的resolv，所以可以直接在后面接then
axios({
url:'http://httpbin.org/headers'
}).then(res=>{
console.log(res)
});
2.配置全局默认属性
axios.defaults.baseURL = 'http://httpbin.org';
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
3.axios发送并发请求
axios.all([axios({
url:'/headers'
}),axios({
url:'/get?show_env=1'
})]).then(res => {
console.log(res);
})
</script>
3、在实际开发中，会有多个服务器，就会有多个域名，所以默认配置为全局不合适，都采用局部配置
二、使用局部配置进行网络请求创建axios实例
1..创建对应的axios实例一
const instance1 = axios.create({
baseURL:'http://httpbin.org',
timeout:9000
// headers:'',可以配置headers
});
// 1.1..调用实例，在请求繁忙的时候，就会请求其它服务器，所以要分开
instance1({
url:'/headers'
}).then(res =>{
console.log(res);
this.result = res;
});
instance1({
url:'/get?show_env=1'
}).then(res =>{
console.log(res);
});
// 2..创建对应的axios实例二
const instance2 = axios.create({
baseURL:'http://112.19.241.84:30023/api/ambulance',
timeout:10000
});
// 2.2..调用实例二的配置
instance2({
url:'/login'
}).then(res =>{
console.log(res);
})
三、axios的封装
由于axios是插件，如果使用的时候在每个组件中都导入axios，那么在官方不维护的时候，就要做大量的修改，所以这里需要对axios做一个封装！、
1、文件位置：一般我们在src下创建一个api目录，里面存放接口的js文件
axios封装位置
2、requests.js文件编写
request.js
import axios from 'axios'
export function request1(config) {
// 一、第一种写法，promise
// return new Promise((resolve, reject) => {
// // 1..创建axios实例
// const instance1 = axios.create({
// baseURL:'http://httpbin.org',
// timeout:6000
// });
//
// // 2..发送真正的网络请求,将res和err传出去，进行异步回调
// instance1(config)
// .then(res =>{
// resolve(res)
// })
// .catch(err =>{
// reject(err)
// })
// })
// 二、第二种写法直接return
// 创建axios实例
const instance1 = axios.create({
baseURL:'http://httpbin.org',
timeout:6000
});
// 发送真正的网络请求
return instance1(config);
}
为什么可以直接return instance1呢？请点击create看下源码~~
3、组件App.vue的调用requests.js
App.vue
<template>
<div id="app">
<h2>{{result}}</h2>
<router-view/>
</div>
</template>
<script>
// 每个组件都导入第三方插件，维护很恼火，如果第三方插件不维护了，就凉凉
// import axios from 'axios'
import {request1} from "./api/requests";
export default {
name:'App',
components:{
},
data(){
return{
result:''
}
},
created() {
console.log('开始axios网络请求，初始化......');
※三、使用封装的axios来请求接口
request1({
url:'/headers'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err);
})
}
}
</script>
四、axios拦截器
axios拦截器分为请求时拦截request，和响应拦截response。同样可以设置全局和局部拦截
1、发送请求时拦截：
1）请求时拦截会做什么呢？
- 比如succ中的一些信息不符合服务器的要求，需要转换下再传过去,例如修headers
- 比如每次发送网络请求时，都希望在请求过程中，界面显示转圈圈的请求图标
- 某些网络请求，比如登录==》必须要携带token！！
requests.js
// 2..axios的拦截器
// 全局的拦截器
// axios.interceptors
// 局部拦截器，里面传入2个参数，参数均是函数，一个成功Fulfilled，一个失败onRejected
// 2.1..请求时拦截,以及为什么拦截，拦截后会做什么事情？
instance1.interceptors.request.use(succ => {
console.log(succ);
// 1)比如succ中的一些信息不符合服务器的要求，需要转换下再传过去,例如修改headers
// 2)比如每次发送网络请求时，都希望在请求过程中，界面显示转圈圈的请求图标
// 3)某些网络请求，比如登录==》必须要携带token！！
// 做了请求拦截之后，一定要return succ信息，不然App.vue真正发送请求时候就拿不到,会报错
return succ;
},error => {
console.log(error);
})
※一定要加return，否则发送的请求被拦截了，对应的组件真正发送请求时候，就拿不到请求的数据
无return结果
2、响应拦截：有时候响应数据多，并不是我们都想要的，所以拦截取出所需数据
// 2.2..响应拦截
instance1.interceptors.response.use(res =>{
console.log(res);
// return res;
//也可以返回 响应数据的指定值
return res.data;
},error => {
console.log(error);
})
响应拦截
网友评论