封装axios(简约版),直接cv就可以使用

我之前写过一篇axios封装的文章,这次axios的封装是非常精简的

首先下载axios的依赖包

npm i axios --save-dev

在项目中src文件夹下创建uitils文件夹,然后创建request.js文件(当然文件名随便取)

接下来直接cv就可以啦

import axios from 'axios'

// 创建一个 axios 实例
const service = axios.create({
    baseURL: '/dev', // 所有的请求地址前缀部分,这里是做了跨域处理的
    timeout: 60000, // 请求超时时间毫秒
    withCredentials: true, // 异步请求携带cookie
    headers: {
        // 设置后端需要的传参类型
        'Content-Type': 'application/json',
        'token': 'your token',
        'X-Requested-With': 'XMLHttpRequest',
    },
})

// 添加请求拦截器
service.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        return config
    },
    function (error) {
        // 对请求错误做些什么
        console.log(error)
        return Promise.reject(error)
    }
)

// 添加响应拦截器
service.interceptors.response.use(
    function (response) {
        console.log('相应消息', response)
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        // dataAxios 是 axios 返回数据中的 data
        const dataAxios = response.data
        // 这个状态码是和后端约定的
        const code = dataAxios.reset
        return dataAxios
    },
    function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        console.log(error)
        return Promise.reject(error)
    }
)

export default service

可以发现baseURL地址是做了跨域的,我的跨域配置文件(vue.config.js)如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置服务器,添加代理选项
  // devServer :开发 服务器
  devServer: {
    //proxy: 代理
    proxy: {
      // 必须重启服务器, 配置才能生效
      // 如果请求地址是 /douyu 开头的, 则被当前代理处理
      '/dev': {
        // target: 由服务器帮助到此域名中请求数据 -- 代理
        target: 'http://www.xxxxxx.com:9999/',
        changeOrigin: true, //代表 域名不同,需要启动代理模式
        // 路径重写: 真正发送的请求地址中, 要去掉 /douyu 开头
        pathRewrite: {
          // ^ :正则中的 字符串开头 的意思
          '^/dev': '',
          // 如果不替换则发送的请求地址如下: 会多余一个 /douyu
          // https://m.douyu.com/douyu/api/room/list?page=1
        },
      },
    },
  },
})

创建一个products.js文件,这个文件中存放的是商品信息相关的接口

import requst from './requst'
// 商品列表接口
export function getProduct() {
    return requst({
        url: 'data/product/index.php',
        methods: "get"
    })
}
// 商品详情接口
export function getDetails(id) {
    return requst({
        url: 'data/product/details.php?lid=' + id,
        method: 'get',
    })
}
//假如有一个用户注册接口
export function login(data) {
    return requst({
        url: 'data/user/register.php',
        method: 'post',
        data
    })
}

在对应的页面中调用已经封装好的接口

<script>
// 先引入对应的接口
import { getProduct, getDetails } from '../utils/products.js'
export default {
  components: { Header, SideMenu },
  created() {
    this.getDatas()
  },
  methods: {
    getDatas() {
      getProduct()
        .then(res => {
          console.log('res', res)
        })
        .catch(err => {
          console.log('错误', err)
        })
      this.getDetailsMethod()
    },
    getDetailsMethod() {
      getDetails(1)
        .then(res => {
          console.log('详情res', res)
        })
        .catch(err => {
          console.log('详情err', err)
        })
    },
  },
}
</script>

这样就可以啦,非常的简便哦