axios的基本使用及在复杂项目的二次封装

1. 基本使用

首先是get请求

import axios from 'axios'

const URL = 'http://api.shop.com/products' //非可用接口 只供参考
axios.get(URL, 
		  {params:{ page:1,per:2 }},
		   headers: {}
		 ).then(res =>{
			console.log(res)
         })

其中的param相当于在URL末尾加了?page=1&per=2
接下来是post请求:

import axios from 'axios'

const URL = 'http://api.shop.com/login' //非可用接口 只供参考
axios.post(URL, 
		  {username: '', password: ''},
		  {}
		 ).then(res =>{
			console.log(res)
         })

2 . 封装

请求拦截器会在所有调用service请求实例之前执行
相应拦截器会在所有调用service请求实例返回后执行

import axios from 'axios'

const service = axios.create({
  baseURL: 'http://api.shop.com',
  timeout: '5000'
})

// http request 拦截器
service.interceptors.request.use(
  config => {
    Loading.show()
    const token = sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token
      config.headers.authorization = token  //请求头加上token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

// http response 拦截器
service.interceptors.response.use(
  response => {
    //拦截响应，做统一处理 
    Loading.hide()
    return response
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error.response.status) // 返回接口返回的错误信息
  })

export default function ajax(url, data = {}, type = "GET") {
    return new Promise((resolve, reject) => {
        let promise;
        // 分get请求和post请求
        if (type === "GET") {
            promise = service.get(url, {
                params: data
            })
        } else {
            promise = service.post(url, data)
        }
        promise.then(response=>{  // 请求成功了
            resolve(response)
        }).catch(error=>{  // 请求失败了
            message.error('请求出问题了，稍后再试~');
        })
    })
}