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

nuxt.js 封装axios

时间:2019-03-05 18:44:14      阅读:1456      评论:0      收藏:0      [点我收藏+]

标签:组件   cnp   cnpm   charset   create   调用接口   verify   utf-8   catch   

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) 
})

 

nuxt.js 封装axios

标签:组件   cnp   cnpm   charset   create   调用接口   verify   utf-8   catch   

原文地址:https://www.cnblogs.com/baikouLoser/p/10478492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!