axios的基本使用

// get 請求
axios.get('api/index.json',{
  params: {}
}).then(res => {}).catch(err => {})
// post 請求
axios.post('/api/getUserInfo', {
  data: {}
}).then(res => {}).catch(err => {})
// 并發(fā)請求
axios.all([
  axios.get('/api/index.json'),
  axios.get('/api/getUser.json')
]).then(axios.spread((indexJson, userJson) => {
    // indexJson 第一個接口返回的數(shù)據(jù)
   //  userJson 第二個接口返回的數(shù)據(jù)
  })
)

axios的全局配置

axios.defaults.timeout = 1000

axios 實例配置

let instance = axios.creat({
  timeout: 1000, // 請求的超時時長
  baseURL: 'http://localhost:8080', // 請求的基本域名地址
  url: '/api/getUser'凳鬓， // 請求地址
  data: {}, // post請求入?yún)?  params: {}, //get 請求入?yún)?  headers: {} // 設(shè)置請求頭
})

axios 攔截器

// 請求攔截器
let instance = axios.interceptors.request.use(config => {
  //   請求前做些什么
  return config
}, err => {
  return Promise.reject(err)
})

// 響應(yīng)攔截器
let instance = axios.interceptors.response.use(res => {
  // 響應(yīng)成功對數(shù)據(jù)做些什么
  return res
}, err => {
  return Promise.reject(err)
})
// 取消攔截器 （一般不用）
 axios.interceptors.request.eject(instance)   

取消請求

let source = axios.CancelToken.source()
    axios.get('/index.json', {
     cancelToken: source.token
   }).then(res => {
     console.log(res)
   }).catch(err => {
     console.log(err)
   })
   // source.cancel(message) 參數(shù)message 可選填
   source.cancel('http get cancel')

axios 的封裝

 import axios from 'axios'
import { baseURL } from '@/config/index.js'
class HttpRequest {
  constructor (baseUrl = baseURL) {
    this.baseUrl = baseUrl
     // 隊列
    this.query = {}
   }
  // 全局參數(shù)
  getinSidConfig () {
    const config = {
      baseUrl: this.baseUrl,
      headers: {}
    }
    return config
  }
 // 請求方法
 request (options) {
    const instance = axios.create()
    options = Object.assign(this.getinSidConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
    // 攔截器
  interceptors (instance, url) {
    instance.interceptors.request.use(config => {
      // 使用隊列的方式處理如果是第一個到最后一個請求了則增加loding
      // 以防出現(xiàn)多個loding層樣式錯誤
      if (!Object.keys(this.query).length) {
        // Spin.show()
      }
      this.query[url] = true
      return config
    }, err => {
      return Promise.reject(err)
    })
    instance.interceptors.response.use(res => {
      delete this.query[url]
      const {data, status} = res
      return {data, status}
    }, err => {
      return Promise.reject(err)
    })
  }
}
export default HttpRequest
// 用法
import axios from './index'
export const getUserInfo = () => {
  return axios.request({
    url: '/getUserInfo',
    methods: 'get'
  })
}
// home.vue
created () {
    getUserInfo().then(res => {
        console.log(res)
   })
}