vue learning -axios

Axios is based on the promise of a HTTP library, you can use the browser and node.js in.

1. axios basic use

installation

Under current foldernpm install axios --save

File import and use

Inlet documents requested network

import axios from 'axios'

It can be used directly axios (config), config general object

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

Defaults to get request, the request may be set to post

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

There are other ways Request

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

Request Parameters params

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

Request parameter following the address request url spliced ​​form desired

2. axios concurrent requests

Sometimes the need to send multiple requests usingaxios.all([])

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

Res returns an array of objects, then the method can be used in axios.spreadthe array divided

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

3. axios Global Configuration

Some parameters are actual development used in some requests, these common parameters can be configured in the file entry so that the file can be used in the request, using the defaults properties axios

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

Example 4. axios

• When we import the object module from axios, examples using the default instance, when the instance to set some default configuration, which is fixed down
• However, subsequent development, certain configuration may be not the same, such as some requests require specific baseURL timeout or the like, can create a new instance, and pass belongs to the configuration of this example

//创建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 network requests package

If a plurality of components are required network request, axios import request in each component file is not realistic.
You can create a separate file for axios network requests, this file a written request function for network requests, required components of the network requests can import function

method one

Other documents required when a network request, to import this function, and then call this function

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

Method Two: Add 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); })

Method three: the ultimate method

Method two are actually two sets of promise together (prohibition of nesting dolls), axios the object itself is a promise, do not return promise, direct return axios examples

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 interceptors

General file written package axios

• Request (success / failure)instance.interceptors.request;
• Response (success / failure)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);  
});