vue-axios网络请求封装

在学习网络请求封装之前，首先要了解get请求和post请求的几种方式

①get请求

//参数一:请求地址
//参数二:配置信息
//params表示传递到服务器的信息，拼接到请求地址url后面{page=1，per=2}
//比如http://api.cat-shop.penkuoer.com/api/v1/products
//最终生成http://api.cat-shop.penkuoer.com/api/v1/products?page=1&per=3
//headers表示请求头
axios.get('http://api.cat-shop.penkuoer.com/api/v1/products',{params:{page=1,per=2},headers:{}}).then(res=>console.log(res));

②post请求

//post请求传递三个参数
//请求地址
//传递的数据 在请求体中传递，默认发送的数据是json格式的
//配置信息
//  headers
//    content-type:'application-json'
axios.post('http://api.cat-shop.penkuoer.com/api/v1/products/auth/login',{username:'xiaoming',password:'111111'},{}).then(res=>{console.log(res)}).catch(err=>console.log(err))

③网络封装

在上一篇博客的基础上，进行编写

新建一个reques.js：

import axios from "axios";
const inf=axios.create({
    baseURL:'/api',
    timeout:5000
})//这里其实就是网络封装
const get=(url,params)=>{
    return inf.get(url,{
        params
    })
}
const post=(url,data)=>{
    return inf.post(url,data);
}
const del=(url)=>{
    return inf.delete(url)
}
const put=(url,data)=>inf.put(url,data);
export{get,post,del,put}

在app.vue进行如下修改：

<script setup>
import{get}from './request'
const sendrequest=()=>{
  get('/posts',{}).then(res=>console.log(res.data))
}
</script>

<template>
  <div>
    <h1>数据测试</h1>
    <button @click="sendrequest">查询数据</button>
  </div>
</template>

<style scoped>

</style>

运行一下vue项目，就发现也可以请求成功了o(*￣▽￣*)ブ：