axios知识记载

Axios

定义

基于Promise的HTTP库，可以用在浏览器和node.js中

特性

1. 从浏览器中创建XMLHttpRequests
2. 从node.js创建http请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防御XSRF

安装

使用npm

npm install axios

基本使用

1. 执行get请求

axios.get('/user?id=12345')
.then(response => {
  console.log(response)
})
.catch(error => {
  console.log(error)
})

// 另一种写法：（如果需要传递多个参数的时候，可以使用这种写法）
axios.get('/user', {
  params: {
    id: 123,
    name: 'why'
  }
})
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

2. 执行post请求

axios.post('/user', {
  firstName: 'a',
  lastName: 'b'
})
.then(response => {
  console.log(response)
})
.catch(error => {
  console.log(error)
})

3. 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/123')
}
function getUserPermissions() {
  return axios.get('/user/123/premissions')
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((acct, perms) => {
  // 两个请求现在都执行完成
}))
// axios.all([])返回的结果是一个数组。使用axios.spread()可将数组[acct, perms]展开为acct,  perms

axios API

可以通过向axios传递相关配置来创建请求
1. axios(config)

// 发送get请求
axios({
  // url: 'http://123.207.32.32:8000/home/data?type=sell&page=1',
  // 针对get请求的参数拼接
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: '1'
  }
}).then( res => {
  console.log(res);
})

// 发送post请求
axios({
method: 'post',
  url: '/user/123',
  data: {
    firstName: 'a',
    lastName: 'b'
  }
}).then( res => {
  console.log(res);
})

2. axios(url[, config]) 默认发送get请求

axios('/user/123')

axios其他请求方法

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, config])
• axios.put(url[, config])
• axios.patch(url[, config])

处理并发请求的函数

axios.all(): 参数是可以放多个请求的数组，返回的结果也是一个数组
axios.spread(callback): 可以将axios.all()返回的数组[res1, res2]展开为res1, res2

创建实例

可以使用自定义配置新建一个axios实例

1. 创建新实例

const instance = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

2. 可用实例方法
   
3. 发送网络请求

instance({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  // console.log(res);
})

请求配置

创建请求时可以用的配置项，只有url是必需的，如果没有指定method，请求将默认使用get方法

响应结构

某个请求的响应包含以下信息：

1. data: {}, 由服务器提供的响应
2. status: 22, 来自服务器响应的HTTP状态码
3. statusText：‘OK’, 来自服务器响应的HTTP状态信息
4. header: {}, 服务器响应的头
5. config: {}, 是为请求提供的配置信息
6. request: {}, 生成此响应的请求，是node.js(在重定向)中的最后一个ClientRequest实例以及浏览器的XMLHttpRequest实例

配置默认值

可以指定将被用在各请求的配置默认值

全局的axios默认值

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

自定义实例默认值

const instance = axios.create({
  baseURL: 'http://222.111.33.33:8000'
})；
instance.defaults.timeout = 5000

配置的优先顺序

配置会以一个优先顺序进行合并，这个顺序是：在lib/defaults.js找到的库的默认值，然后是实例的defaults属性，最后是请求的config参数。后者将优先于前者

// 此时使用的是由库提供的配置的默认值来创建实例的，此时超时配置的默认值是0
var instance = axios.create();
// 覆盖库的超时默认值，在超时前，所有的请求都会等待2.5秒
instance.defaults.timeout = 2500;
// 为已知需要花费很长时间的请求覆写超时设置
instance.get( '/longRequest', {
	timeout: 5000	
})

拦截器

在请求或响应被then或catch处理前拦截它们

请求拦截 ： axios.interceptors.request.use()

  axios.interceptors.request.use(config => {
    // console.log(config)
    // 1) 比如config中的一些信息不符合服务器的要求
    // 2) 比如每次发送网络请求时，都希望在界面显示一个请求的图标
    // 3) 某些网络请求（比如登录（token）），必须携带一些特殊的信息
    return config
  }, err => {
    // console.log(err)
  })

响应拦截: axios.interceptors.response.use()

axios.interceptors.response.use(response=> {
    // console.log(response);
    return response
  }, err => {
    console.log(err);
  })

如果想要移除拦截器，可以：

const myInterceptor = axios.interceptors.request.use(function() {});
axios.interceptors.request.eject(myInterceptor);

可以为自定义axios实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function() {});

模块封装

在vue中使用时，对axios模块进行封装，方便进行管理，采取的方式如下：

1. 创建一个network文件夹专门存放网络请求的数据处理文件，新建request.js
2. 在文件中创建axios实例，并传入对象进行网络请求
3. 在main.js文件中使用，request函数返回的是一个promise对象，就可以使用.then或.catch对返回的数据进行处理

import axios form 'axios'
export function request(config) {
	// 1.创建axios实例
	const instance = axios.create({
		baseURL: 'http://123.207.32.32:8000',
		timeout: 5000
	})
	// 2.发送真正的网络请求，返回的是一个Promise对象
	return instance(config)
}

// main.js
import {request} from './network/request'
request({
	url: '/user/123'
}).then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})