博客

首先是引入 axios

npm i --save axios

服务这么多当然要封装啦 跨域 就是要通过 proxy 代理成自己的服务

// request.js

import axios from 'axios'
import store from '@/store'

let instance = axios.create({
  baseURL: store.state.baseUrl,  // 代理成自己的服务
  timeout: 5000,
  withCredentials: false
})

instance.interceptors.request.use(
  config => {
    console.log(config)
    if (config.method === 'post') {
      config.transformRequest = [
        data => {
          // 对 data 进行任意转换处理
          //   return $.param(data)
          let ret = ''
          for (let it in data) {
            ret +=
              encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }
      ]
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
    const { code, message, data } = response.data
    if (+code === 200) {
      resolve({
        data,
        origin: response
      })
    } else {
      console.log(
        '\x1b[31m====================DEBUG/s======================\x1b[31m'
      )
      console.log(`request url: ${url}`)
      console.log(`request body: ${JSON.stringify(data)}`)
      console.log(
        '\x1b[31m====================DEBUG/e======================\x1b[31m'
      )
      console.log('\r')
      reject({
        message,
        code: 500,
        briefErr: {
          url
        }
      })
    }
  },
  error => {
    console.log('interceptors.response' + error)
    return Promise.reject(error)
  }
)
export default instance

最后一步代理啊 当然是 config 中的 proxy处理

// config/index.js 
 
proxyTable: {
      '/district': {  // 拦截转发路径
        target: 'http://192.168.0.70:9061',  // 代理目标
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/district': '/district'  // 重写 
        }
      }
    },
    host: IP,
    port: 8180,

以为这样就完了  啊，我叶这么认为  其实不是这样的

// 省份列表  
export function getProviceList(params) {
  return request({
    url: '/district/provice',
    method: 'get',
    params
  })
}

这是一个get请求是要接收 params 的

如果是 post 才用data，记住了啊

// 省份列表
export function getProviceList(data) {
  return request({
    url: '/district/provice',
    method: 'post',
    data
  })
}