vue项目搭建以及全家桶的使用详细教程(小结)(6)

日期：2020-05-11 栏目：程序人生浏览：次

步骤七、请求api管理

这里我们使用axios发起异步的请求，安装很简单，npm install axios 即可，一开始的时候，我使用的是直接在每个组件内使用axios,到后面发现，但当我需要修改api接口的时候，需要查找的比较麻烦，只因为没有集中的对所有的api进行管理，而且每个请求回来的接口都需要写对应的报错处理，着实麻烦，这里我新建一个fecth文件夹并在其下新建一个api.js用来存放所有的axios处理和封装，：

//fetch/api.js
import axios from 'axios'

export function fetch(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params).then(
   response => {
    resolve(response.data)
   }
  ).catch(error => {
   console.log(error)
   reject(error)
  })
 })
}

getDefaultData=()=>{
 return fetch('/api/getBoardList');
}
export default {
 getDefaultData
}

这样做的好处是集中化的管理了所有的api接口，当我们需要修改接口相关的代码，只需要在api.js中修改，包括路由修改以及路由拦截等，可读性更好；在不同的组件内，我们只需要把对应的接口用解构赋值的思想把它引入对应的组件内即可使用。

import {getDefaultData} from '@/fetch/api.js'

步骤八、代理服务器的配置

这个功能主要是我们在调试接口的时候使用，因为当我们运行npm run dev 的时候，实际上我们的项目已经挂载在一个本地服务端运行了，端口号为我们配置的8080，当我们想在该项目下访问服务端接口数据的时候，就会产生跨域的问题，这个时候，我们就需要使用到proxy代理我们的数据请求，在vue-cli中已有配置相关的代码，我们仅需要把对应的代理规则写进去即可，这里以一个通用配置例子实现;

首先，我们在fetch文件夹下新建一个config.js的文件，用于存放我们的代理路径配置：

const url = 'http://www.dayilb.com/';
let ROOT;
if (process.env.NODE_ENV === 'production') {
 //生产环境下的地址
 ROOT = url;
} else {
 //开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
 ROOT = "/"
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

接下来，我们要在config目录下新建一个proxyConfig.js,存放代理服务器的配置规则：

var config= require("../src/fetch/config");
module.exports = {
 proxy: {
  [config.ROOT]: {  //需要代理的接口，一般会加前缀来区分，但我个人是没加，即‘/'都转发代理
   target: config.PROXYROOT, // 接口域名
   changeOrigin: true, //是否跨域
   pathRewrite: {
    [`^/`]: ''  //需要rewrite的，针对上面的配置，是不需要的
   }
  }
 }
}

转载注明出处：http://www.heiqu.com/85.html

vue项目搭建以及全家桶的使用详细教程(小结)(6)

相关推荐