axios的使用

下载依赖 

npm install axios

axios原生请求

1.导入

import axios from "axios";

2.html代码

<div>
       <button @click="getMthods()">get</button>
       <button @click="postMthods()">post</button>
</div>

3.js代码

getMthods() {
      axios
        .get("https://api.cat-shop.penkuoer.com/api/v1/products", {
          params: {
            page: 3,
            per: 2
          },
          headers: {}//请求头 可以写token验证
        })
        .then(res => {
          console.log("请求成功", res);
        }).catch(err => {
            console.log('err',err);
        })
    },
    postMthods() {
      axios
        .post(
          "https://api.cat-shop.penkuoer.com/api/v1/auth/login",
          {
            name: "lxy",
            age: 18
          },//json格式的参数
          {
            params: {
              a: 123,
              b: 123
            }//拼接在链接上的参数
          }
        )
        .then(res => {
          console.log("请求成功", res);
        }).catch(err => {
            console.log('err',err);
        })
    }

封装axios

在src新建一个文件夹utils,新建一个文件名request.js

import axios from "axios";


// 创建axios的对象
const instance = axios.create({
  baseURL: "https://api.cat-shop.penkuoer.com",
  timeout: 5000
});

// 请求拦截
// 所有的网络请求都会走这个方法,可以在请求添加自定义内容
instance.interceptors.request.use(
  function(config) {
    // 请求头添加token值
    config.headers.token = "123456";
    return config;
  },
  function(err) {
    return Promise.request(err);
  }
);

// 响应拦截
// 此处可以根据服务器返回的状态码做相应的数据
//请求成功后，返回数据之前的拦截
instance.interceptors.response.use(
  function(response) {
    const res = response;
    if (res.status === 500) {
    //   MessageBox.alert("系统未登录，请重新登录", "错误", {
    //     confirmButtonText: "确定",
    //     type: "error"
    //   }).then(() => {
    //     store.dispatch("FedLogOut").then(() => {
    //       location.reload();
    //     });
    //   });
    //   return Promise.reject("error");
    } else if (res.errno === 502) {
    //   MessageBox.alert("系统内部错误，请联系管理员维护", "错误", {
    //     confirmButtonText: "确定",
    //     type: "error"
    //   });
    //   return Promise.reject("error");
    }
  },
  function(err) {
    return Promise.request(err);
  }
);

export function get(url, params) {
  return instance.get(url, {
    params
  });
}

export function post(url, data) {
  return instance.get(url, data);
}

<template> 
   <div>
       <button @click="getMthods()">get</button>
       <button @click="postMthods()">post</button>
   </div>
</template>

<script>
import {get,post} from "@/utils/request.js";
export default {
  methods: {
    getMthods() {
       get("/api/v1/products").then((res) => {
        console.log("res", res);
      });
    },
    postMthods() {
        let obj = {
        name: "lxy",
      };
      post("/api/v1/auth/login", obj).then((res) => {
        console.log("res", res);
      });
    },
    
  }
};
</script>

<style></style>

get跟post接口参数不同

export function products(params) {
  params.currentCompanyOpenId = 'currentCompanyOpenId'
  params.currentOpenId = 'currentOpenId'
  return request({
    url: "/api/v1/products",  //接口路径
    method: "get",  //接口方法
    params  //接口参数
  });
}

export function login(data) {
  return request({
    url: "/api/v1/auth/login",
    method: "post",
    data,
    params: {
      currentOpenId: 'currentOpenId',
      currentCompanyOpenId: 'currentCompanyOpenId'
    }
  });
}