vue 项目中axios的使用以及封装 跨域的配置

1.新建request.js文件（我放于util目录下），里面引入axios,创建axios实例，在实例里面作基础路径的配置，暴露出axios实例对象

import axios from 'axios'
const request = axios.create({
  baseURL: 'api/', // 基础路径
  withCredentials: true // 表示请求可以携带cookie
})
export default request

2.配置具体的请求接口。

新建目录 src/api/index.js    在index.js中定义每一个请求的方法

引入request文件，配置每个请求，注意get请求携带参数时参数在params对象中

import request from '../util/request'
export const getTagList = (params) => {
  return request({
    method: 'GET',
    url: 'shop/1/tag',
    params
  })
}
// 新增tag
/**
  * 参数： name:标签名字
  *        category:
  *        type:1
*/
export const creatTagAdd = data => {
  return request({
    method: 'POST',
    url: 'shop/1/tag',
    data: data
  })
}

3.在页面中使用接口

按序导入接口方法，并使用

import { getGroupPacketById, getGroupPacket } from '../api/index'

async getTagDefined () {
      const params = { type: 1 }
      const data = await getTagList(params)

async addTagg () {
      const arr = { name: this.addTag, type: 1 }
      creatTag(arr)

4.跨域的设置

在与src同级的目录中新建vue.config.js文件
 

module.exports = {
  // local Laravel server address for api proxy
  devServer: {
    proxy: {
      '/api': {
        target: 'http://106.14.175.81', // 接口的域名
        changeOrigin: true, // 是否改变请求的host
      }
    }
  },