vue3 axios-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

 npm install axios

import axios from 'axios'
// 创建axios实例
const request = axios.create({
    baseURL: '',// 所有的请求地址前缀部分(没有后端请求不用写)
    timeout: 80000, // 请求超时时间(毫秒)
    withCredentials: true,// 异步请求携带cookie
    // headers: {
    // 设置后端需要的传参类型
    // 'Content-Type': 'application/json',
    // 'token': x-auth-token',//一开始就要token
    // 'X-Requested-With': 'XMLHttpRequest',
    // },
})

// request拦截器
request.interceptors.request.use(
    config => {
        // 如果你要去localStor获取token,(如果你有)
        // let token = localStorage.getItem("x-auth-token");
        // if (token) {
        //添加请求头
        //config.headers["Authorization"]="Bearer "+ token
        // }
        return config
    },
    error => {
        // 对请求错误做些什么
        Promise.reject(error)
    }
)

// response 拦截器
request.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
export default request

import instance from "./request";

// post请求，有参数,如传用户名和密码
export const loginAPI = (data: any)=>{
    return  instance.post("/admin/login", data);
}

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  plugins: [
    vue(),
    //...
  ],
  server: {
    proxy: {
      '/api': { // 匹配请求路径，
        target: '你要代理的地址', // 代理的目标地址
        // 开发模式，默认的127.0.0.1,开启后代理服务会把origin修改为目标地址
        changeOrigin: true,
        // secure: true, // 是否https接口
        // ws: true, // 是否代理websockets

        // 路径重写，**** 如果你的后端有统一前缀(如:/api)，就不开启；没有就开启
        //简单来说，就是是否改路径 加某些东西
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

import { loginAPI } from "../../utils/api";
//直接使用，一般用在进入页面入请求数据的接口
let user = ref({
  uer: 1234,
  password: 12344
})
const loginAPI = async () => {
  let res = await loginAPI({
    ...user,
  })
  console.log("***", res);
  let { list, pageNum, pageSize, total } = res.data
  console.log(list, pageNum, pageSize, total);
}

文章来源地址https://www.toymoban.com/news/detail-728229.html

到了这里，关于vue3 axios的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！