nuxt.js 封装axios

Posted 2021-02-14 百科全输

1、安装axios

　　

cnpm install axios --save

 

2、在plugins文件夹下面创建service.js

import axios from ‘axios‘

import { Message, Notification } from ‘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

 

3、创建统一接口文件

　　在一级目录创建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
  })
}

 

 

4、组件内调用接口

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

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