2020-08-24

学习axios的基本用法

axios是什么

  axios是基于Promise用于浏览器和node.js的HTTP客户端

axios的安装

  npm install axios --save

axios的功能特点

  在浏览器中发送XMLHttpRequests请求
  在node.js中发送http请求
  支持Promise API
  拦截请求和响应
  转换请求和响应数据等

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]])

注：默认axios(config)是get请求

axios发送并发请求

• 使用axios.all([])，可以放入多个请求的数组
• axios.all([])返回的结果是一个数组，使用axios.spread可将数组[result1, result2]展开为result1, result2

axios.all([axios({
			url:'×××/home'
			}), axios({
				url: '×××/profile'
				params: {
					type: 'aa'
					page: 5
					}
				})]).then(result => {
							console.log(result[0]);
							console.log(result[1]);
						})
						
//等价于

axios.all([axios({
			url:'×××/home'
			}), axios({
				url: '×××/profile'
				params: {
					type: 'aa'
					page: 5
					}
				})]).then(axios.spread((result1, result2)) => {
							console.log(result1);
							console.log(result2);
						})

全局配置

例如：axios.defaults.baseURL = ‘http://111.111.11.11:8080’

常见的配置选项：

请求方式	代码
请求地址	url: '/user'
请求类型	method: 'get'
请根路径	baseURL: 'http://www.mt.com/api'
请求前的数据处理	transformRequest: [function(data){}]
请求后的数据处理	transformResponse: [function(data){}]
自定义的请求头	headers:{'x-Requested-With':'XMLHttpRequest'}
URL查询对象	params:{id:2}
查询对象序列化函数	paramsSerializer: function(params){}
request body	data: {key: 'aa'}
超时设置s	timeout: 1000
跨域是否带Token	withCredentials: false
自定义请求处理	adapter: function(resolve,reject,config){}
身份验证信息	auth: {uname: '', pwd: '123'}
响应的数据格式 json / blob / document / arraybuffer / text / stream	responseType: 'json'

axios实例

  创建对应的axios实例 → axios.create()

  例如：

/**
*创建实例
**/
const instance = axios.create({
			url: 'xxx',
			timeout: xxx
			})
			
/**
*发送真正网络请求
**/
/**
*在其他文件中进行调用
**/
instance(config)//返回的是promise
//等价于
instance(config).then(res => {
				console.log(res);
				}).catch(err => {
				reject(err);
				})
//等价于
instance(config.baseConfig).then(res => {
							config.success(res);
							}).catch(err => {
							config.failure(err);
							})

axios拦截器

  用于我们在发送每次请求或者得到响应之后，进行对应的处理

  拦截： 1.拦截实例instance.interceptors
              2.拦截全局axios.interceptors

   请求拦截器的作用：
    1.config中一些信息不符合服务器的需求
    2.每次发送网络请求时，希望在界面显示一个请求的图标（在响应拦截是取消）
    3.某些网络请求（比如登录（token）），必须携带一些特殊信息

  配置请求和响应拦截（实例）

//请求拦截
instance.interceptors.request.use(config => {
		//需要将拿到的config给return一下
		console.log('进入request拦截success中');
		return config;}, err => {
				console.log('进入request拦截failure中');
				return err;
				})

//响应拦截
instance.interceptors.response.use(response => {
		console.log('进入response拦截success中');
		return response;}, err => {
				console.log('进入response拦截failure中');
				return err;
				})

完整的例子

//导入axios库
import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://111.111.11.11',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    //拦截后需要将拦截下来的请求数据返回发送
    return config
  }, err => {
    console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    // 拦截后需要将拦截下来处理成的结果返回
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}