axios使用详解

2019-01-24 本文已影响0人建国_e12f

1. 拦截器

1.1 请求拦截器

基本格式

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

可以添加一些头部信息

// 判读用户token是否存在
export const uaFlag = function () {
  return true
  // let idToken = localStore.getLocalStore('token')
  // if (idToken) {
  //   return true
  // } else {
  //   console.warn('require user_auth')
  //   window.location.href = LOGIN_URL(true)
  //   return false
  // }
}

// 统一设置token信息
// const idToken = localStore.getLocalStore('token')
// if(idToken){
//   axios.defaults.headers.common['AUTHORIZATION'] = idToken
// }

// request
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
  if (config.method === 'post') {
    // 序列化
    // config.data = qs.stringify(config.data);
  }
  if (uaFlag) {
    // 上面统一设置了token，也可以在这里设置
    // let idToken = localStore.getLocalStore('token')
    // config.headers['AUTHORIZATION'] = idToken
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

1.2 响应拦截器

axios响应时，基本信息的捕获

axios.interceptors.response.use((response) => {
  // 请求已发出，服务器响应的状态码在 2xx 范围内的都会在这里
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
  return response
}, (error) => {
  if (error.response) {
    // 请求已发出，但服务器响应的状态码不在 2xx 范围内
    console.log(error.response.data); // 一般错误信息会放在data.message下
    console.log(error.response.status);
    console.log(error.response.headers);
  } else {
    // Something happened in setting up the request that triggered an Error
    // 超时等会在这里触发，获取错误信息，直接使用error.message即可
    console.log('Error', error.message);
  }
  console.log(error.config)
  return Promise.reject(error);
}

改造

// response
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use((response) => {
  // 一般restful规范的接口在这里接收到的都是正确数据，直接返回数据即可
  return response.data
  
  // 不是restfull规范的接口，错误信息也是通过200状态码返回的，里面的格式一般会是
  // success
  // {
  //   code: 0,
  //   data: [],
  //   message: 'ok'
  // }
  // // error
  // {
  //   code: -1,
  //   message: '错误信息'
  // }
  // console.log(response.data);
  // if (response.data.code !== 0) {
  //   return Promise.reject(response.data.message)
  // } else {
  //   return response.data.data
  // }
}, (error) => {
  if (error.response) {
    if (error.response.status === 401) { // 未登陆
      vm.$router.push({
        name: 'login'
      })
    }
    // 一般的错误信息都会放在data.message中，对于restful规范的接口，错误信息可能不在这里，需要根据实际情况捕获。如：有的在response.text中
    return Promise.reject(error.response.data.message)
  } else {
    // Something happened in setting up the request that triggered an Error
    // 超时等会在这里触发，获取错误信息，直接使用error.message即可
    return Promise.reject(error.message)
  }
})


export const _get = (url, params = null) => {
  const promise = axios.get(url, { params: params })
  return new Promise((resolve, reject) => {
    promise.then((result) => {
      resolve(result)
    }).catch((error) => {
      // 一般会有弹框显示错误信息
      // 如果没有特殊要求，在这里打印错误即可，在调用处不用捕获错误信息，因为在调用处捕获到错误一般也只是打印一下错误信息。
      reject(error) // 拦截器已过滤，这里是错误信息内容
    })
  })
}

2. 一个完整的api-util.js文件

import axios from 'axios'
// import qs from 'qs'
import Vue from 'vue'
import router from '@/router'

// import localStore from './localStore'

let vm = new Vue({ router })
const ENV = process.env.NODE_ENV

const baseUrl = ENV === 'development'
  ? 'http://www.imooc.com/api'
  : ENV === 'production'
    ? 'http://www.imooc.com/api'
    : 'http://www.imooc.com/api'
axios.defaults.baseURL = baseUrl

axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 防止ie缓存
if (navigator.userAgent.indexOf('MSIE 9') > -1) {
  axios.defaults.headers.common['If-Modified-Since'] = '0'
}

export const uaFlag = function () {
  return true
  // let idToken = localStore.getLocalStore('token')
  // if (idToken) {
  //   return true
  // } else {
  //   console.warn('require user_auth')
  //   window.location.href = LOGIN_URL(true)
  //   return false
  // }
}

// 统一设置token信息
// const idToken = localStore.getLocalStore('token')
// if(idToken){
//   axios.defaults.headers.common['AUTHORIZATION'] = idToken
// }

// request
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
  if (config.method === 'post') {
    // 序列化
    // config.data = qs.stringify(config.data);
  }
  if (uaFlag) {
    // 上面统一设置了token，也可以在这里设置
    // let idToken = localStore.getLocalStore('token')
    // config.headers['AUTHORIZATION'] = idToken
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// response
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) => {
  return res.data
}, (error) => {
  if (error.response) {
    if (error.response.status === 401) { // 未登陆
      vm.$router.push({
        name: 'login'
      })
    }
    return Promise.reject(error.response.data.message)
  } else {
    return Promise.reject(error.message)
  }
})

export const joinURL = function (...urls) {
  return '/' + urls.join('/')
}

export const _get = (url, params = null) => {
  const promise = axios.get(url, { params: params })
  return new Promise((resolve, reject) => {
    promise.then((result) => {
      resolve(result)
    }).catch((error) => {
      // 一般会有弹框显示错误信息
      reject(error) // 拦截器已过滤，这里是错误信息
    })
  })
}

export const _post = (url, data) => {
  const promise = axios.post(url, data)
  return new Promise((resolve, reject) => {
    promise.then((result) => {
      resolve(result)
    }).catch((error) => {
      // 一般会有弹框显示错误信息
      reject(error) // 拦截器已过滤，这里是错误信息
    })
  })
}

export const _patch = (url, data) => {
  const promise = axios.patch(url, data)
  return new Promise((resolve, reject) => {
    promise.then((result) => {
      resolve(result)
    }).catch((error) => {
      // 一般会有弹框显示错误信息
      reject(error) // 拦截器已过滤，这里是错误信息
    })
  })
}

export const _delete = (url) => {
  const promise = axios.delete(url)
  return new Promise((resolve, reject) => {
    promise.then((result) => {
      resolve(result)
    }).catch((error) => {
      // 一般会有弹框显示错误信息
      reject(error) // 拦截器已过滤，这里是错误信息
    })
  })
}

3. api.js文件

import {
  _get,
  _post,
  joinURL
} from './util'

export default {
  login (data) {
    let url = '/login'
    return _post(url, data)
  },

  listUser () {
    let url = joinURL('users')
    return _get(url)
  },

  listHomeSlider () {
    let url = joinURL('home', 'sliders')
    return _get(url)
  }
}

4. 组件中使用

import api '@/api/api'
...

methods: {
    getSlider () {
        this.sliderLoading = true
        api.listHomeSlider().then(res => {
            this.sliderLoading = false
            if (res.code === 0) {
                this.sliders = res.slider
            } else {
                this.sliders = []
                console.log('获取数据失败', res.message)
            }
        }).catch(() => {
            this.sliderLoading = false
            this.sliders = []
        })
    }
}

axios使用详解

1. 拦截器

1.1 请求拦截器

1.2 响应拦截器

2. 一个完整的api-util.js文件

3. api.js文件

4. 组件中使用

猜你喜欢

热点阅读