美文网首页
axios使用详解

axios使用详解

作者: 建国_e12f | 来源:发表于2019-01-24 17:58 被阅读0次

    文档

    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使用详解

          本文链接:https://www.haomeiwen.com/subject/yqeujqtx.html