Vue3.0(八):网络请求库axios

网络请求库axios

axios官网

  • 功能特点
    • 在浏览器中发送 XMLHttpRequests请求
    • 在node.js中发送http请求
    • 支持Promise API
    • 拦截请求和响应
    • 转换请求和响应数据

axios请求方式

  • 支持多种请求方式

    axios(config)

    axios.request(config)

    axios.get(url[, config])

    axios.delete(url[, config])

    axios.head(url[, config])

    axios.options(url[, config])

    axios.post(url[, data[, config]])

    axios.put(url[, data[, config]])

    axios.patch(url[, data[, config]])

    axios.postForm(url[, data[, config]])

    axios.putForm(url[, data[, config]])

    axios.patchForm(url[, data[, config]])

  • 常见的 config配置选项

    • 请求地址(url:'/user'
    • 请求类型(method:'get'
    • 请求根路径(baseURL:'http://www.xxx.com'
    • 请求前的数据处理(transformRequest:[function(data){}]
    • 请求后的数据处理(transformResponse:[function(data){}]
    • 自定义的请求头(headers:{'x-Requested-With':'XMLHttpRequest'}
    • URL查询对象(params:{id:12}

基本使用

  • 通过 npm install axios进行安装

  • 在main.js中引入axios

js 复制代码
import axios from "axios";
  • 使用 axios.request(config)发送网络请求,默认是get方法
js 复制代码
axios.request("http://xxxxx").then((res) => {
  console.log(res.data);
});
  • 使用 axios.get(url[, config])发送网络请求
js 复制代码
//第一种写法,把query直接写在url中
axios.get("http://xxxx?id=500665346").then((res) => {
    console.log(res.data);
});

//第二种写法,通过config写query
axios
    .get("http://xxxx", {
    params: {
        id: 500665346,
    },
})
    .then((res) => {
    console.log(res.data);
});
  • 使用 axios.post(url[, data[, config]])发送网络请求
js 复制代码
//第二个参数可以直接传请求对象
axios
  .post("http://xxxxx", {
    username: "admin",
    password: "123456",
  })
  .then((res) => {
    console.log(res.data);
  });
//第二个参数可以传config对象,post请求对象需要用data包裹

axios
  .post("http://xxxx", {
    data: {
      username: "admin",
      password: "123456",
    },
  })
  .then((res) => {
    console.log(res.data);
  });

baseURL

针对于项目中的多个网络请求,我们每次写网络请求的host会显得十分麻烦,因此可以借助baseURL进行简化

  • 通过 axios.defaults.baseURL进行设置
js 复制代码
import axios from "axios"

const baseURL = "http://xxxx"
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 1000

axios.get("/home").then((res)=>{
    console.log("res",res.data)
})

axios.all发送多个请求

  • axios.all中传入一个数组,当都有结果的时候,才会调用then方法
  • 实际上在axios的内部,就是调用了promise.all方法
js 复制代码
axios.all([
    axios.get("http://xxxx"),
    axios.get("http://xxx")
]).then((res)=>{
    console.log(res)
})

axios的创建实例

  • 在上面的例子中,我们通过import引入的默认实例发送的网络请求
js 复制代码
import axios from "axios"
axios.get()...
  • 但是在实际的项目开发中,有可能数据从多个不同的服务器中获取

  • 因此我们可以通过axios创建不同的实例

js 复制代码
import axios from "axios"

const instance = axios.create({
    baseURL:"http://123.456.789"
})

const instance = axios.create({
    baseURL:"http://456.789.123"
})


//通过创建的实例发送网络请求
instance.get()
instance.get()

请求和响应的拦截

  • 通过 axios.interceptors.request/response对请求和响应进行拦截
js 复制代码
// axios.interceptors.request.use(成功的回调,失败的回调)
axios.interceptors.request.use(
  (config) => {
    //会将请求的配置传入
    //1.开始loading动画
    //2.对原来的配置进行修改
    //2.1header
    //2.2认证登录:token/cookie
    //请求参数的某些转化
    console.log("请求成功");
    return config;
  },
  (err) => {
    console.log("请求失败了");
    return err;
  }
);

// axios.interceptors.response.use(成功的回调,失败的回调)
axios.interceptors.response.use(
  (res) => {
    console.log("响应成功");
    //return之后的数据,会在请求后的.then中接收到
    return res.data;
  },
  (err) => {
    console.log("请求失败");
    return err;
  }
);

axios
  .get("http://123.207.32.32:8000/home/multidata")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });
相关推荐
MC丶科1 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
90后的晨仔4 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
90后的晨仔4 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔4 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀4 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
Sheldon一蓑烟雨任平生7 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
鹿鹿鹿鹿isNotDefined8 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
武昌库里写JAVA9 小时前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
Itai9 小时前
自定义 markdown 解析规则并渲染 Vue 组件
vue.js
karshey9 小时前
【vue】NoticeBar:滚动通知栏组件手动实现(内容、速度、循环间隔可配置)
前端·javascript·vue.js