vue中请求接口怎么封装公共地址_聊聊vuejs里对于API接口的处理、封装以及跨域方法应用...

对于中小型企业，vue应用越来越多，学习vue相对于react的成本要低点，入门相对简单。话说来，你想学精，还是得花很多事件得研究的。您可以关注Web前端之家，一起学习。

今天我们一起来学下：vuejs里对于API接口的处理以及封装方法应用。

API接口基础应用

在原生javascript和JQ里，我们前端处理接口，一般都是使用get和post方法。在vueJs里，也是如此，只不过我们多了一个axios。

在vue里面处理接口，首先我们得装下axios。操作方法如下：

npm install vue-axios --save

npm install qs.js --save　　//这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式

安装完之后，我们在vue配置文件里应用它，看代码：import Vue from 'vue'

import axios from 'axios'

Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios

Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs

然后在项目里应用它：

export default{

data(){

return{

userId:666,

token:'',

}

},

created(){

this.$axios({

method:'post',

url:'api',

data:this.qs.stringify({    //这里是发送给后台的数据

userId:this.userId,

token:this.token,

})

}).then((response) =>{          //这里使用了ES6的语法

console.log(response)       //请求成功返回的数据

}).catch((error) =>

console.log(error)       //请求失败返回的数据

})

}

}

这是个最简单的处理api接口的应用。

如果项目中有很多个接口呢？那么我们就不能这样去做了，利用原生js处理方法，封装起来。

封装

我们拿一个很简单的例子来说明下:/**

* api接口统一管理

*/

import { get, post } from './axios';

/**

* @param {string} params

* 我们定义了一个topics方法

* 这个方法有一个参数params

* params是我们请求接口时携带的参数对象

* 而后调用了我们封装的post方法

* post方法的第一个参数是我们的接口地址

* 第二个参数是topics的params参数

* 即请求接口时携带的参数对象

* 最后通过export导出topics。

*/

// 用户相关接口

export const login = params => post('/users/login', params);//登录

export const logout = params => post('/users/logout', params);//登出

export const uplodHead = params => post('/users/uploadHead', params);//修改头像

export const bannerTextList = params => post('/query/bannerTextList', params);//查询轮播内容

export const getArticle = params => post('/query/getArticle', params);//普通文章详情

export const uploadBgImg = params => post('/upload/uploadBgImg', params);//普通文章页面背景

export const getBannerBg = params => post('/query/getBannerBg', params);//查询普通文章页面背景

....

从上面的的代码可以看出，我们把每个功能api都封装起来了，并且放在api.js里，这样处理，便于我们在其他页面应用它。

现在我们要应用它，先在公用index.js里配置下，import * as api from './api'

export default api

接下来我们可以在其他页面里应用它了。//先引入

import { getArticle } from '..tp/api.js'

//使用

getArticle(这里是参数).then((res)=>{

console.log(res);

})

跨域

众所周知，处理API接口，经常会遇到跨域问题，在vueJS里，我们处理跨域的方法比较简单。这里也直接拿代码来说；

在vue.config.js进行如下配置：module.exports = {

publicPath: buidLocal ? '' : '/',

outputDir: buidLocal ? 'public/static/YhIndex_app' : 'dist',

assetsDir: 'static',

lintOnSave: false,

productionSourceMap: !buidLocal, // 本地包编译不需要SourceMap

filenameHashing: !buidLocal, // 本地包编译不需要给文件名添加hash

devServer: {

host: '0.0.0.0',

port: '8086',

proxy: {

'/static/trade.html': {

target: 'http://localhost:8086',

pathRewrite: {

'/static/trade.html': '/trade.html',

}

},

'/bo/call': {

target: `http://192.168.35.88:10576`,

changeOrigin: true,

},

'/login': {

target: `http://192.168.35.88:10576`,

changeOrigin: true,

},

'/upload_image': {

target: `http://192.168.35.88:10576`,

changeOrigin: true,

},

'/task': {

target: `http://192.168.35.88:8920`,

changeOrigin: true,

}

},

}

};

这样就可以了，当然这是项目里的DEMO代码，大家如果要应用，可以根据自己项目的配置进行修改即可。

总结

关于在vuejs里处理api接口的方法和应用，大概就这些内容了，分析得不够详细，如果您基础不好或者看不懂，可以加群咨询或者留言都可以。