安装axios
npm install axios --save
axios使用
axios({
url: ‘http://123.207.32.32:8000/home/multidata‘,
method: ‘get‘
}).then((res) => {
console.log(res);
})
axios({
// url: ‘http://123.207.32.32:8000/home/data?type=sell&page=1‘,
url: ‘http://123.207.32.32:8000/home/data‘,
//专门针对get请求的参数拼接
params: {
type: ‘sell‘,
page: 5
},
method: ‘get‘
}).then((res) => {
console.log(res);
})
发送并发请求
有时候，我们可能需要同时发送两个请求
- 使用axios.all可以放入多个请求的数组
- axios.all([ ])返回的结果是一个数组
axios.all([
axios({
url: ‘http://123.207.32.32:8000/home/multidata‘
}),
axios({
url: ‘http://123.207.32.32:8000/home/data‘,
//专门针对get请求的参数拼接
params: {
type: ‘sell‘,
page: 5
}
})
]).then((result) => {
console.log(result[0]);
console.log(result[1]);
})
axios全局配置
在开发中，可能很多参数都是固定的，这个时候我们可以进行一些抽取，也可以利用axios的全局配置
axios.defaults.baseURL = ‘http://123.207.32.32:8000‘
axios.defaults.timeout = 5000
axios.all([
axios({
url: ‘/home/multidata‘
}),
axios({
url: ‘/home/data‘,
//专门针对get请求的参数拼接
params: {
type: ‘sell‘,
page: 5
}
})
]).then((result) => {
console.log(result[0]);
console.log(result[1]);
})
常见的配置选项：
请求地址：
- url: ‘/user‘
请求类型：
- method: ‘get‘
请求根路径：
- baseURL: ‘http://123.207.32.32:8000‘
请求前的数据处理：
- transformRequest: [function(data){ }]
请求后的数据处理：
- transformResponse: [function(data){ }]
自定义的请求头：
- headers: {‘x-Requested-With‘}: ‘XMLHttpRequest‘}
URL查询对象：
- params: {id: 12}
axios的实例
为什么要创建axios的实例？
- 在开发中，我们需要的axios的配置是各种各样的
- 比如某些请求需要使用特定的baseURL或者timeout
- 这时，我们可以创建新的实例，并且传入属于该实例的配置信息
封装request模块
目录结构
封装request模块（通过回调函数success和failure处理）
request.js
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
//封装request模块（通过回调函数success和failure处理）
import {request} from "./network/request";
request({
url: ‘/home/multidata‘
}, res => {
console.log(res);
}, err => {
console.log(err);
})
封装request模块（通过Promise方式）
request.js
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
return new Promise((resolve, reject) => {
instance(config)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
//封装request模块（通过Promise方式）
import {request} from "./network/request";
request({
url: ‘/home/multidata‘
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
封装request模块（最终方案）
因为axios本身返回的就是Promise，所以不用再封装一层Promise
request.js
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
return instance(config)
}
main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
//封装request模块（通过Promise方式）
import {request} from "./network/request";
request({
url: ‘/home/multidata‘
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios拦截器
axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行相应的处理
import axios from "axios";
export function request (config, success, failure) {
//创建axios的实例
const instance = axios.create({
baseURL: ‘http://123.207.32.32:8000‘,
timeout: 5000
})
//axios的拦截器
//请求拦截
instance.interceptors.request.use(aaa => {
console.log(aaa);
//请求拦截的作用：
//1、比如aaa中的一些信息不符合服务器的要求，在这里可以进行处理
//2、比如每次发送网络请求时，都希望在界面中显示一个请求中的图标（比如一个循环的圈圈）
//3、某些网络请求（比如登录（token）），必须携带一些特殊的信息
//必须返回，如果不返回则请求发不出去
return aaa;
}, error => {
console.log(error);
})
//响应拦截（服务器将结果发过来了）
instance.interceptors.response.use(res => {
console.log(res);
//必须返回，如果不返回就拿不到结果
//在这里将无用的数据剔除掉，将有用数据返回
return res.data
}, error => {
console.log(error);
})
//发送真正的网络请求
return instance(config)
}