vue请求封装

向后台请求的方式有好几种。
例如：
Promise、Fetch、Axios等

1、先下载axios依赖。

2、在build文件下的*.env.js文件中配置全局访问地址前缀：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
 API_ROOT: '"http://127.0.0.1:8080/api"'/*后台接口访问地址*/
})

3、在src目录下创建一个js文件，这里取名request.js。
内容如下：

import axios from 'axios'
 // 创建axios实例
const service = axios.create({
  //这个地方引用build文件里面的配置
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000 // 请求超时时间
})

service.interceptors.response.use(
    function(response) {
      //请求正常则返回
      return Promise.resolve(response)
    },
    function(error) {
      // 请求错误则向store commit这个状态变化
      const httpError= { 
        hasError:true,
        status:error.response.status,
        statusText:error.response.statusText
      }
      store.commit('ON_HTTP_ERROR', httpError)
      return Promise.reject(error)
    }
  )

  export default service

4、现在就可以在api文件夹下创建文件写具体的请求了。

//导入之前创建好的request.js文件
import request from '@/utils/request'

export function test(){
    return request({
        url: `/setLanguage`,
        method: 'get',
        params: "ie=utf-8"
    })
}
//这个request就会和url这里组合起来，后面请求地址最终就会变成：
http://127.0.0.1:8080/api/setLanguage?ie=utf-8

5、解决跨域问题，在config的index.js文件中添加

   //解决跨域问题
    proxyTable: {
      '/api':{
        //跨域的接口访问地址
        target: "https:/hyly.com/api",
        //是否跨域
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
    }

6、生产环境和开发环境切换，只需要修改 “dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”，这个文件就是build下的文件

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },