一:axios请求方式
支持多种请求方式:
- axios(config)
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
1.1 安装使用
npm install axios --save
这里直接在main.js文件演示:
..................
import axios from 'axios'
....................
axios({
url: 'http://httpbin.org/',
method: 'get' # 默认get请求
}).then(res => {
console.log(res);
})
带参数的get请求:
axios({
url: 'http://httpbin.org/get?name=andy&age=17',
method: 'get'
}).then(res => {
console.log(res.data.args);
})
或者:
axios({
url: 'http://httpbin.org/get',
method: 'get',
params: {
name: 'andy',
age: 17
}
}).then(res => {
console.log(res.data.args);
}
1.2 发送并发请求
axios.all([
axios({
url: 'http://httpbin.org/get'
}),
axios({
url: 'http://httpbin.org/get',
params: {name: 'andy', age: 17}
})
# 上面两个请求全部完成后,执行到then()中
]).then(results => { # 返回一个数组
console.log(results[0]);
console.log(results[1]);
})
axios提供了一个spread方法,可将results解构:
axios.all([
axios({
url: 'http://httpbin.org/get'
}),
axios({
url: 'http://httpbin.org/get',
params: {name: 'andy', age: 17}
})
]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
1.3 配置信息相关
# 全局公共配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000
axios.all([
axios({
url: '/get'
}),
axios({
url: '/get',
params: {name: 'andy', age: 17}
})
]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
1.4 axios实例
开发过程可能会请求不同IP:PORT,(这里排除nginx转发),那么就不能像上面那样做全局配置。
此时可以创建多个axios实例,然后使用不同的实例去请求
const instance1 = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000
})
instance1({
url: '/get'
}).then(res => {
console.log(res);
})
1.5 模块封装
创建src/network/request.js文件
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000
})
// instance(config)返回的就是Promise
return instance(config)
}
使用方法:
import {request} from './network/request'
request({
url: '/get'
}, res => {
console.log(res);
}, err => {
console.log(err);
})
1.6 axios拦截器
axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000
})
// 请求拦截
instance.interceptors.request.use(config => {
// 1:比如config中的一些信息不符合服务器的要求,可以使用拦截器,在这里做处理
// 2:比如每次发送网络请求时,希望在界面显示一个请求的图标
// 3:某些网络请求(如登录),必须携带一些特殊信息
// console.log(config);
// 拦截成功的请求,处理后必须要返回
return config
}, error => {
// console.log(error);
});
// 响应拦截
instance.interceptors.response.use(res => {
return res.data
}, error => {
console.log(error);
});
// instance(config)返回的就是Promise
return instance(config)
}
1.7 生产环境的使用
1:封装axios
封装的文件为:src/network/request.js,内容就是1.6节的内容
2:假如现在需要在course.vue组件中请求数据
新建src/network/course.js文件,course.vue中所有的数据请求都放到course.js文件中
import {request} from './request'
export function getData() {
return request({
url: '/get'
})
}
3:在course.vue组件中请求方法
<script>
import {getData} from 'network/course'
export default {
name: "Course",
data() {
return {}
},
created() {
getData().then(res => {
console.log(res)
})
}
}
</script>