码迷,mamicode.com
首页 > 移动开发 > 详细

axios 封装

时间:2018-04-12 18:38:09      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:pre   引入   import   col   default   response   charset   XML   调用   

常见用法引入 axios 直接使用

// get
axios.get(‘/user‘, {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//post
axios.post(‘/user‘ , { params: { firstName: ‘Fred‘, lastName: ‘Flintstone‘ } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

创建一个 js 文件,封装代码如下:

‘use strict‘

import axios from ‘axios‘
import qs from ‘qs‘

// 拦截器
axios.interceptors.request.use(config => {
  // loading
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

function checkStatus (response) {
  // loading
  // 如果http状态码正常,则直接返回数据
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response.data
    // 如果不需要除了data之外的数据,可以直接 return response.data
  }
  // 异常状态下,把错误信息返回去
  return {
    status: -404,
    msg: ‘网络异常‘
  }
}

function checkCode (res) {
    // 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误),可以弹出一个错误提示,告诉用户
    if (res.status === -404) {
        console.log(res.msg)
    }
    if (res.data && (!res.data.success)) {
        console.log(res.data.error_msg)
    }
    return res
}

export default {
  post (url, data) {
    return axios({
      method: ‘post‘,
      baseURL: ‘http://ws.sandbox.mammasay.com‘,
      url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        ‘X-Requested-With‘: ‘XMLHttpRequest‘,
        ‘Content-Type‘: ‘application/x-www-form-urlencoded; charset=UTF-8‘
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  },
  get (url, params) {
    return axios({
      method: ‘get‘,
      baseURL: ‘http://ws.sandbox.mammasay.com‘,
      url,
      params, // get 请求时带的参数
      timeout: 10000,
      headers: {
        ‘X-Requested-With‘: ‘XMLHttpRequest‘
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }
}

组件里边调用,引入该 JS 即可。

axios 封装

标签:pre   引入   import   col   default   response   charset   XML   调用   

原文地址:https://www.cnblogs.com/hai-cheng/p/8809505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!