vue-axios 封装

自定义一个request.js文件用来封装axios

import axios from 'axios' //导入axios

const instance=axios.create({
  baseURL:"https:api.cat-shop.penkuoer.com",//baseURL会在发送请求的时候拼接在url参数前面,在不同的生产环境中修改这个就行了
  timeout:5000
})

export function get(url,params){//封装get传入URL和params
  return instance.get(url,{
    params
  });
}

export function post(url,data){//封装post传入URL和data
  return instance.post(url,data);
}

export function del(url){//封装del传入URL
  return instance.delete(url);
}

export function put(url,data){//封装put传入URL和data
  return instance.put(url,data);
}

使用

<template>
  <div>
    <button @click="getByMineRequest()">调用封装的get获取后端数据</button>
  </div>
</template>

<script>
  import {get} from '../../utils/request.js'//导入request文件
  
  export default {
    name: "HelloWorld",
    methods: {
      getByMineRequest:function(){
        get("/api/v1/products",{})//调用reques中的get方法传入路径（路径会自动拼接在instance后面）和空的params

        .then(function(response){
          console.log(response)
        })
      }
    }
  }
</script>

<style>
</style>