1. axios的功能和特点
在浏览器中发送
XMLHttpRequests请求；在
node.js中发送http请求；支持
Promise API；拦截请求和响应；
拦截请求和响应。
1.1 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]])。
2. axios的基本使用
2.1 安装 axios
- 使用
npm install axios --save安装axios。
2.2 在main.js中导入
import axios from 'axios'
2.3 使用 axios 发送简单请求
axios发送请求默认返回的是一个Promise对象。使用Promise对象调用then方法处理返回结果。axios默认发送的是一个GET请求。
/**
* 发送请求，
* 会不会出现跨域?
* 默认发送的是get请求
*/
axios({
url: 'http://123.207.32.32:8000/home/multidata',
methods: 'get'
}).then(value => {
console.log(value)
})
axios.get('http://123.207.32.32:8000/home/multidata').then(
value => {
console.log(value)
}
)
发送请求的时候传递参数
axios({
url:'http://123.207.32.32:8000/home/multidata',
params:{
type:'pop',
page:1
}
})
2.4 全局配置
- 事实上, 在开发中可能很多参数都是固定的，这个时候我们可以进行一些抽取, 也可以利用
axiox的全局配置。
axios.defaults.baseURL = ‘xxx.xxx.xxx.xxx:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’
axios.defaults.timeout = 5000
2.5 axios常见的配置选项
请求地址
url: '/user';请求类型
method: 'get';请根路径
baseURL: 'http://www.mt.com/api';请求前的数据处理
transformRequest:[function(data){}];请求后的数据处理
transformResponse: [function(data){}];自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'};URL查询对象
params:{ id: 12 };查询对象序列化函数
paramsSerializer: function(params){ };请求体
request body data: { key: 'aa'};超时设置ms
timeout: 1000;跨域是否带
Token withCredentials: false;自定义请求处理
adapter: function(resolve, reject, config){};身份验证信息
auth: { uname: '', pwd: '12'};响应的数据格式
json / blob /document /arraybuffer / text / stream;响类型
responseType: 'json';
2.6 axios发送 并发请求
- 有时我们可能需要同时发送 多个请求，可以使用
axios.all()，可以放入多个请求的数组，axios.all([])返回结果是一个数组，使用axios.spread可将数组[val1,val2]进行解构。
axios.all([
axios({
url: 'http://123.207.32.32:8000/home/multidata'
})
,
axios({
url: 'http://123.207.32.32:8000/home/multidata',
params: {
type: 'pop',
page: 4
}
})
/!* 对返回的结果数组进行展开 *!/
]).then(value => {
console.log(value[0]);
console.log(value[1]);
})
2.7 axios发送get请求传递参数的几种方式
3. axios的实例和模块的封装
- 在
src下创建一个network/request.js，在该文件中封装axios模块:
import axios from 'axios'
export default function (config) {
// 创建一个新的axios实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
// 返回请求对象 返回一个 Promise 对象
return instance(config)
}
4. axios 拦截器的使用
4.1 请求拦截可以做的几件事
当发送网络请求时，页面中希望添加一个
loading的组件，作为动画；某些请求要求用户必须登录，判断用户是否有
token如果没有token则跳转到login页面。对请求参数进行序列化。
当出现请求错误时，可以将页面跳转到一个错误页面中。
/**
* 请求拦截器
*/
instance.interceptors.request.use(
config => {
// 请求成功时
console.log(config)
/**
* 可能在这里进行的处理
* 1. 需要检查config的配置
* 2. 在请求过程中的动画
* 3. 某些网络请求是必须携带一些特殊的信息 如 token
*/
console.log(config.headers)
return config // 需要将config作为返回值返回
},
err => {
// 请求失败的时候
console.log(err)
}
)
4.2 响应拦截器主要可以做什么？
响应的成功拦截中，主要进行数据的过滤。
响应的失败拦截中，可以根据
status判断报错的错误码，跳转到不同的错误页面。
/**
* 响应拦截器
* 对响应结果进行的处理
*/
instance.interceptors.response.use(
result => {
// 这里会将结果进行拦截
return result.data
// console.log(result)
},
err => {
}
)
5. 一个简单request.js请求模块的封装
import axios from 'axios'
export default function (config) {
// 创建一个新的axios实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
/**
* 请求拦截器
*/
instance.interceptors.request.use(
config => {
// 请求成功时
console.log(config)
/**
* 可能在这里进行的处理
* 1. 需要检查config的配置
* 2. 在请求过程中的动画
* 3. 某些网络请求是必须携带一些特殊的信息 如 token
*/
console.log(config.headers)
return config // 需要将config作为返回值返回
},
err => {
// 请求失败的时候
console.log(err)
}
)
/**
* 响应拦截器
* 对响应结果进行的处理
*/
instance.interceptors.response.use(
result => {
// 这里会将结果进行拦截
return result.data
// console.log(result)
},
err => {
}
)
// 返回请求对象 返回一个 Promise 对象
return instance(config)
}
