java axios干啥用的,vue中axios的使用与封装

分享下我自己的axios封装

axios是个很好用的插件，都是一些params对象，所以很方便做一些统一处理

当然首先是npm安装axios 很简单$ npm install axios --save

在src下新建文件夹 service / index.js

接着上代码

1 import axios from 'axios';

2 import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示

3 import router from '../router'

4

5 // 默认超时设置

6 axios.defaults.timeout = 50000;

7

8 // 相对路径设置

9 axios.defaults.baseURL ='';

10

11 //http request 拦截器

12 axios.interceptors.request.use(

13 config =>{

14 // 获取token

15 const token = localStorage.getItem('cc_token'); 16 // 设置参数格式 17 if(!config.headers['Content-Type']){ 18 config.headers ={ 19 'Content-Type':'application/json', 20 }; 21 } 22 // 添加token到headers 23 if(token){ 24 config.headers.token =token 25 } 26 // 鉴权参数设置 27 if(config.method === 'get'){ 28 //get请求下 参数在params中，其他请求在data中 29 config.params = config.params ||{}; 30 let json =JSON.parse(JSON.stringify(config.params)); 31 //一些参数处理 32 }else{ 33 config.data = config.data ||{}; 34 //一些参数处理 35 } 36 returnconfig; 37 }, 38 err =>{ 39 returnPromise.reject(err); 40 } 41 );

以上请求之前的一些处理就完成了

下面是获得返回的一些处理

//http response 拦截器

axios.interceptors.response.use(

response =>{

//一些统一code的返回处理

if(response.data.code === 501){

// 登录验证

//做了个示例跳转项目中登录，并记录下相对路径

router.push({

name:'login',//从哪个页面跳转

query:{

retUrl:window.location.href.split('#')[1] || '', is_new_user_url:1} }) } returnresponse; }, error =>{ returnPromise.reject(error) } );

接着把所有请求类型都做下简单封装

/**

* 封装get方法

* @param url

* @param params

* @returns {Promise}

*/export function fetch(url,params={}){

return new Promise((resolve,reject) =>{

axios.get(url,{

params:params

})

.then(response =>{

if(response.data.code === 200){

//返回成功处理 这里传的啥 后续调用的时候 res就是啥

resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了

}else{ //错误处理 Toast(response.data.msg) } }) .catch(err =>{ reject(err); let message = '请求失败！请检查网络'; //错误返回 if(err.response)message=err.response.data.message; Toast(message) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */export function post(url,data ={}){ return new Promise((resolve,reject) =>{ axios.post(url,data) .then(response =>{ if(response.data.code === 200){ resolve(response.data.data); }else{ Toast(response.data.msg) } },err =>{ reject(err); let message = '请求失败！请检查网络'; if(err.response)message=err.response.data.message; Toast(message) }) }) } /** * 封装patch请求 * @param url * @param data * @returns {Promise} */export function patch(url,data ={}){ return new Promise((resolve,reject) =>{ axios.patch(url,data) .then(response =>{ if(response.data.code === 200){ resolve(response.data.data); }else{ Toast(response.data.msg) } },err =>{ reject(err); let message = '请求失败！请检查网络'; if(err.response)message=err.response.data.message; Toast(message) }) }) } /** * 封装put请求 * @param url * @param data * @returns {Promise} */export function put(url,data ={}){ return new Promise((resolve,reject) =>{ axios.put(url,data) .then(response =>{ if(response.data.code === 200){ resolve(response.data.data); }else{ Toast(response.data.msg) } },err =>{ reject(err); let message = '请求失败！请检查网络'; if(err.response)message=err.response.data.message; Toast(message) }) }) } export function del(url,data ={}){ return new Promise((resolve,reject) =>{ axios.delete(url,data) .then(response =>{ if(response.data.code === 200){ resolve(response.data.data); }else{ Toast(response.data.msg) } },err =>{ reject(err); let message = '请求失败！请检查网络'; if(err.response)message=err.response.data.message; Toast(message) }) }) }

好了 主要的文件编辑好 然后在service中新建api.js文件并引入对应组件方法

import Vue from 'vue';

import {post,fetch,patch,put,del,upload,ret2} from './index'Vue.prototype.$post=post;

Vue.prototype.$fetch=fetch;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put; Vue.prototype.$del=del;

接着就可以开始写各个API方法了

//也可以不需要

const _baseUrl=process.env.API_URL;//这里我在项目配置文件里面设置了相对路径

//登录方法

const loginURL = `${_baseUrl}api/admin/login`;

export const loginApi = function(json) {

return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})

};

//修改账号信息RESTful

const editAdminUrl = `${_baseUrl}api/admin/user/info`;

export const editAdminListApi = function(id,json) {

return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)

};

//等等...

最后是使用，非常简单方便，在vue文件中引入并使用

import { loginApi ,editAdminListApi } from "../../service/api";

export default{

methods：{

//登录

login(){

let json ={

userName:'xx',

password:'xx'} loginApi().then(res=>{ console.log(res) }) }, // RESTful 修改信息 editAdminList(){ let id = 1; let json = {name:11}; editAdminListApi(id,json).then(res=>{ console.log(res) }) } } }

使用方便简洁。

over