标签:组件 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) })
标签:组件 cnp cnpm charset create 调用接口 verify utf-8 catch
原文地址:https://www.cnblogs.com/baikouLoser/p/10478492.html