VUE项目中Axios的封装使用

介绍项目安装依赖封装使用例子Ending

介绍

axios是VUE.js 2提供给用户异步获取调用接口的组件库，封装axios的好处是有利于减少代码的冗余，看起来清晰，明了。

项目安装依赖

在项目控制台运行 npm install axios -S

封装

直接上代码

import axios from 'axios' import { getToken } from './auth' // 创建axios实例 const service = axios.create({ baseURL: '/api', // api的base_url timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 表示跨域请求时是否需要使用凭证 service.defaults.withCredentials = true service.defaults.crossDomain = true export function commonRequestUtil(param) { return { header: { version: '1.0', token: getToken() }, body: param } } export function commonPost(url, params = {}) { return service({ url: url, method: 'post', data: commonRequestUtil(params) }) } export function commonPut(url, params = {}) { return service({ url: url, method: 'put', data: commonRequestUtil(params) }) } export function commonDelete(url, params = {}) { return service({ url: url, method: 'delete', data: commonRequestUtil(params) }) } export function get(url) { return service({ url: url, method: 'get' }) } export default function post(url, params = {}) { return new Promise((resolve, reject) => { axios.post(url, commonRequestUtil(params) , { headers: { 'Content-Type': 'application/json;charset=UTF-8' }}) .then(response => { resolve(response.data) }) .catch(err => { reject(err) }) }) }

*这样就完成了axios的封装

使用例子

import {commonDelete, commonPost , commonPut} from '../utils/commonRequestUtil' const examRequest = { /** * 考试人员密码登录 */ reqPasswordLogin(data = {}){ return commonPost('/auth/mobile/pwd-login',data) }, }

这样在组件中就可以引入examRequest.js进行使用了，不过需要配置跨域 如何配置跨域请访问: link.

Ending