nuxt.js 封裝axios

一、安裝axios

　　

cnpm install axios --save

 

二、在plugins文件夾下面建立service.js

import axios from 'axios'

import { Message, Notification } from 'element-ui' // 這裏使用了element-ui的消息提示方法，也可自行定義 

axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.post['Content-Type'] = 'text/plain;charset=UTF-8'
let service = axios.create({
  // baseURL: '/',
  timeout: 10000
})

 // 請求攔截 可在請求頭中加入token等
service.interceptors.request.use(config => {

  return config
}, error => {
  return Promise.reject(error)
})

// 響應攔截 對響應消息做初步的處理
service.interceptors.response.use(resp => {
  if (resp.data) {
    if (resp.data.code !== '0') {
      Message({
        type: 'error',
        message: resp.data.message,
        duration: 5000
      })
    }
    return { code: resp.data.code, data: resp.data.data, msg: resp.data.message }
  } else {
    return resp
  }
}, error => {
  if (error.response) {
    switch (error.response.states) {
      case 400: {
        if (error.response && error.response.data && error.response.data.message) {
          Notification.error({
            title: '400錯誤',
            message: error.response.data.message,
            duration: 5000,
            closable: true
          })
        }
        break
      }
    }
  }
})

export default service

 

三、建立統一接口文件

　　在一級目錄建立api文件夾，在api文件夾下面建立user.js(可根據後臺接口自定義命名)

　　user.js代碼：

import request from '@/plugins/axios'

// 獲取驗證碼
export const getVerifyCode = () => {
  return request({
    url: '/user/getVerifyCode',
    method: 'get'
  })
}

// 登陸
export function login (data) {
  return request({
    url: '/user/login',
    method: 'post',
    data: data
  })
}

export function getUser (params) {
  return request({
    url: '/user/getUser',
    method: 'get',
    params: params
  })
}

 

 

四、組件內調用接口

import { getVerifyCode } from '@/api/user'

getVerifyCode().then(res => {
   console.log(res) 
}).catch(err => {
   console.log(err) 
})