JS最新技术ES6,结合Vue全局注册,实现Axios封装配置插件!

vue

接下来,带来js全新技术ES6,结合Vue install全局组件实现Axios封装,以代码形式讲解。

1、请求封装

//file:src/api/http/http.js

import axios from 'axios'

axios.create();

axios.interceptors.request.use((config)=>{ //axios请求拦截

return config; //记得return请求

})

axios.interceptors.response.use((response)=>{

return response;

})

class http{

static async get(url,params,contentType="application/x-www-form-urlencoded"){

return await axios.get(url,{

params,

headers:{

"Content-Type":contentType

}

})

}

static async post(url,params,contentType="application/x-www-form-urlencoded"){

return await axios.post(url,params,{

headers:{

"Content-Type":contentType

}

})

}

}

export default http

2、引入封装的http.js

//file: src/api/http/login.js

import http from './http'

export const login=(params)=>http.get("api/course",params)

3、将所有封装的请求封装进一个js文件

//file : src/api/http/index.js

import {login} from './login'

export default {

login

}

4、实现vue全局注册组件

//file : src/api/index.js

import api from './http'

const install=(vue)=>{

if(install.installed){

return;

}

vue.prototype.$api=api;

}

export default install

5、main.js使用(作者配置webpack别名,可以直接引入)

// file : main.js

import api from 'api/index'

Vue.use(api);

接下来,就可以在页面中使用this.$api.login等进行请求了哦,ES6最大的特点是方便、简介,笔者建议大家温故知新,循序渐进!

以上是 JS最新技术ES6,结合Vue全局注册,实现Axios封装配置插件! 的全部内容, 来源链接: utcz.com/z/379042.html

回到顶部