vue学习-axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1. axios基本使用

安装

当前文件夹下npm install axios --save

文件中导入并使用

在需要网络请求的入口文件中

import axios from 'axios'

就可以直接使用axios(config)，config一般为对象

axios({
  url:'xxx' 
}).then(res =>{
  console.log(res); //axios支持promise的API
})

默认采用get请求，可以设置为post请求

axios({
  url:'xxx',
  method: "post"
}).then(res =>{
  console.log(res); 
})

其他请求方式有

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

请求参数params

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  //请求参数
  params: {
    type: 'pop',
    page: 1
  }
}).then(res =>{
  console.log(res); 
})

请求参数会拼接到url后面形成需要的请求地址

2. axios并发请求

有时候需要同时发送多个请求，采用axios.all([])

//axios.all([axios({}),axios({})])
axios.all([axios({
  url: 'xxx'
}).axios({
  url: 'zzz'
})])
.then(res =>{
  console.log(res); 
})

返回的res是一个对象数组，可在then方法中用axios.spread将数组分割

axios.all([axios({
  url: 'xxx'
}).axios({
  url: 'zzz'
})])
.then(axios.spread(res1,res2) =>{
  console.log(res1); 
  console.log(res2); 
})

3. axios全局配置

实际开发中有些参数在一些请求中均有使用，可以在入口文件中配置这些公共参数，这样文件中请求都能使用，用axios的defaults属性

axios.defaults.baseURL = 'xxx'
axios.defaults.timeout = 5000

4. axios实例

• 当我们从axios模块中导入对象时, 使用的实例是默认的实例，当给该实例设置一些默认配置时, 这些配置就被固定下来了
• 但是后续开发中, 某些配置可能会不太一样，比如某些请求需要使用特定的baseURL或者timeout等，可以创建新的实例, 并且传入属于该实例的配置

//创建axios实例instance1，可以增加需要的配置
const instance1 = axios.create({
  baseURL: 'xxx',
  timeout: 5000
})

//实例instance1发送网络请求
instance1({
  url: 'yyy',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
  
})

5. axios网络请求封装

如果多个组件都需要网络请求，在每个组件文件中进行axios导入请求不太现实。
可以单独创建一个axios文件用于网络请求，这个文件中写了一个用于网络请求的函数request，需要的网络请求的组件就可以import这个函数

方法一

其他文件需要网络请求时，先导入这个函数，然后调用这个函数

//在其他文件中,调用request函数
import request from './network/request'
//其中第一个参数对象=config参数，第二个参数函数=success参数，第三个参数函数=failure函数
request({
  url: 'xxx'
},res => {
  console.log(res); 
},err => {
  console.log(err); 
})

方法二：加入promise

//在其他文件中,调用request函数
import request from './network/request'

request({url: 'xxx'}) //这个request函数调用后返回一个promise对象,创建后立即执行promise的异步操作（创建axios实例与网络请求）
.then(res => {console.log(res); })//网络请求成功调用axios实例的then方法，then方法又调用外层promise的resolve方法，从而触发promise的then方法
.catch(err => {console.log(err); })

方法三：终极方法

方法二其实是两个promise套在一起了（禁止套娃），axios本身就是一个promise对象，不用return promise，直接return axios实例

import axios from 'axios'

export function request(config){
    //1.创建axios实例，不要用全局
    const instance = axios.create({
      baseURL = "xxx",
      //baseURL = "xxx" 
      timeout: 5000
    })
    return instance(config)
}

//在其他文件中,调用request函数
import request from './network/request'

request({url: 'xxx'}) //这个request函数调用后返回一个axios实例，他就能用promise的api
.then(res => {console.log(res); })
.catch(err => {console.log(err); })

axios的拦截器

一般写到封装的axios文件中

• 请求（成功/失败）instance.interceptors.request;
• 响应（成功/失败）instance.interceptors.response;

//请求拦截器
instance.interceptors.request.use(config => {
  console.log(config);
  return config; //要返回拦截的请求内容不然后续网络请求就失败了
},err => {
  console.log(err);    
});
//响应拦截器
instance.interceptors.response.use(result => {
  console.log(result); 
  return result.data //一般result中的data有用 
},err => {
  console.log(err);  
});