聊聊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

然后在项目里应用它：

<script>
    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)       //请求失败返回的数据
            })
        }
    }</script>

这是个最简单的处理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代码，大家如果要应用，可以根据自己项目的配置进行修改即可。