axios

1.基本概念

網絡模塊封裝,也就是Ajax的封裝

1.1 基本使用

安裝
npm install axios -S引入 使用

import axios from 'axios'

axios({
  url:'http://127.0.0.1:3000/home/multidata',
  method:'get',
  params:{
  	
  }
}).then((res)=>{
  console.log(res)
})

也支持 axios.get() axios.post()等

1.2 axios併發請求處理

使用all方法.來處理兩個請求都完成後再處理

axios.all([axios({
  url: 'http://127.0.0.1:3000/home/multidata'
}), axios({
      url: 'http://127.0.0.1:3000/home/data',
      params: {
        type: 'sell',
        page: '1'
      }
    }
)]).then((results) => {
  console.log(results[0])
  console.log(results[1])
})

也支持數據延展

axios.all([axios({
  url: 'http://127.0.0.1:3000/home/multidata'
}), axios({
      url: 'http://127.0.0.1:3000/home/data',
      params: {
        type: 'sell',
        page: '1'
      }
    }
)]).then(axios.spread((res1,res2)=>{
	console.lof(res1)
	console.lof(res2)
})})

1.3 axios 全局配置

相當於把相同配置提取出來

axios.defaults.baseURL = 'http://127.0.0.1:3000'
axios.defaults.timeout = 10000

配置後 就可以省略域名

axios({
  url:'/home/multidata',
  method:'get'
}).then((res)=>{
  console.log(res)
})

1.4 其他配置

1. 請求前的數據處理 transformRequest:[function(data){}]
2. 請求後的數據處理 transformResponse:[function(data){}]
3. 自定義請求頭 headers:{‘x-Requested-With’:‘XMLHttpRequest’}
4. URL查詢對象 params:{id:22}

2.axios的實例創建

以上方式都是全局的axios使用,爲了實際使用方便,特別創建實例來進行數據請求
axios的實例創建

//創建實例
const instance1 = axios.create({
  baseURL: 'http://127.0.0.1:3000',
  timeout: 10000
})
//使用
instance1({
  url: '/home/data',
  params: {
  }
}).then((res) => {
  console.log(res)
})

2.1 axios封裝爲一個文件

新建一個文件夾 將封裝的文件放入該文件,然後封裝一個方法

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: '',
    timeout: 5000
  })
  return instance(config)
}

使用

import {request} from './network/request'

//使用
request({
	url:'/home/data'
}).then(res=>{
	console.log(res)
}).catch(err=>{
	console.log(res)
})

2.2 axios攔截器

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: '',
    timeout: 5000
  })
  //攔截器
  //請求成功與失敗攔截
  instance.interceptors.request.use(config => {
    console.log(config)
    return config //返回出去數據
  }, err => {
    console.log(err)
  })
  //響應成功與失敗攔截
  instance.interceptors.response.use(result => {
    console.log(result)
    return result //返回出去數據
  }, err => {
    console.log(err)
  })
  return instance(config)
}