vue如何封裝axios的請(qǐng)求

axios 攔截器， 看適用不

http.js

/**
 * Created by liuzhengdong on 2017/9/6.
 * http
 * addRequestInterceptor
 * addResponseInterceptor
 */
import axios from 'axios'

const defaultHeaders = {
  Accept: 'application/json, text/plain, */*; charset=utf-8',
  'Content-Type': 'application/json; charset=utf-8',
  Pragma: 'no-cache',
  'Cache-Control': 'no-cache',
}
// 設(shè)置默認(rèn)頭
Object.assign(axios.defaults.headers.common, defaultHeaders)

const methods = ['get', 'post', 'put', 'delete']

const http = {}
methods.forEach(method => {
  http[method] = axios[method].bind(axios)
})

export default http

export const addRequestInterceptor =
  axios.interceptors.request.use.bind(axios.interceptors.request)

export const addResponseInterceptor =
  axios.interceptors.response.use.bind(axios.interceptors.response)

index.js

/**
 * 為vue實(shí)例添加http方法
 * Vue.use(http)
 */
import http from './http'

export default {
  /**
   * install鉤子
   * @param {Vue} Vue Vue
   */
  install(Vue) {
    Vue.prototype.http = http
  },
}

config.js

...
import http from '@config/utils/http'
...

// 注冊(cè)插件
Vue.use(http)

// request前自動(dòng)添加api配置
addRequestInterceptor(
  (config) => {
    // config.url = `/api${config.url}`
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 返回response前處理
addResponseInterceptor(
  (response) => {
    // 在這里統(tǒng)一前置處理請(qǐng)求響應(yīng)
    if (Number(response.status) !== 200) {
      return Promise.reject(response.data)
    }
    return Promise.resolve(response.data)
  },
  (error) => {
    return Promise.reject(error || '出錯(cuò)了')
  }
)

具體可以參考koa2-webpack-vue2配置

.vue中 this.http.get||post就行了

你不知道有字典這回事嗎？

var error_dict = {
  "-1": "手機(jī)號(hào)不存在",
  "-2": "密碼錯(cuò)誤",
  "-3": "登錄超時(shí)",
  "-5": "驗(yàn)證碼超時(shí)",
};
if (msg.data.state < 0) {
  alert(error_dict[msg.data.state]);
}

給你給鏈接，雖然標(biāo)題是使用cookie的，但是下面的內(nèi)容有解決你這個(gè)的：http://blog.csdn.net/xiaoyueh...

const service = axios.create({
  baseURL: baseUrl,
})

service.interceptors.response.use(
  response => {
    //這里寫(xiě)的你這么多if else 但是千萬(wàn)別用alert啊，可以用reject拋出錯(cuò)誤
    //下面是我的代碼
    if (response.data.success) {
      return response
    } else {
      return Promise.reject(response.data.message)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

const service = axios.create({
  baseURL: baseUrl,
})

service.interceptors.response.use(
  response => {
    //這里寫(xiě)的你這么多if else 但是千萬(wàn)別用alert啊，可以用reject拋出錯(cuò)誤
    //下面是我的代碼
    if (response.data.success) {
      return response
    } else {
      return Promise.reject(response.data.message)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

    * *   * *   *    * *  
   *     *     *   *      *  
<========      *==        *==<<<<<<  
     *       *          *  
      *   *     *    *        
        *         *