axios的简单封装及使用

首先新建一个utils文件夹里面新建一个http.js文件中写入：

import axios from 'axios'
// 配置请求的基准URL地址
axios.defaults.baseURL = 'https://api.it120.cc'

//axios设置请求拦截器
axios.interceptors.request.use(config => {
    config.headers.mytoken = 'nihao' //设置响应头
    return config
}, err => {
    console.log(err)
})

//axios设置响应拦截器
axios.interceptors.response.use(response => {
    return response.data //拦截处理响应结果，直接返回需要的数据
}, err => {
    console.log(err)
})

export default axios

紧接着就是url接口的封装

import axios from '@/plugins/axios'
export const querynewdetall  = (id) => {
    return axios.request({
        url: 'small4/shop/goods/detail',
        method: 'post',
        params: id
    })
}

组件中直接使用

<script>
import { querynewdetall } from "@/plugins/api/zhuantixiangqong";
export default {
  data() {
    return {
      detall: [],
    };
  },
  methods: {
    requestnewdetall() {
      let vm = this;
      querynewdetall({ id: vm.$route.params.id }).then((res) => {
        this.detall = res;
      });
    },
  },
  mounted() {
    this.requestnewdetall();
  },
};
</script>

这里采用了动态路由传参在路由的后面加个/:id即可

 {
    path: '/Rengqidetails/:id',
    name: 'Rengqidetails',
    component: () => import("@/views/kanjia/Rengqidetails.vue")
  },