Vue3——Axios(网络请求库)

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

求一键三连

希望大家看完觉得有用的话点赞、关注和收藏,感谢!!!

前言

Vue3——Axios(网络请求库)
axios可以在浏览器和node里面用

原生的问题:无法在node里使用,fetch是在浏览器里使用的。(但是原生可以帮助我们理解。)
Vue3——Axios(网络请求库)

认识axios

Vue3——Axios(网络请求库)

Vue3——Axios(网络请求库)
Vue3——Axios(网络请求库)


使用Axios

1.安装axios
2.创建service文件夹并在里面创建index.js,import axios,然后创建封装axios的类并导出创建的axios实例对象
3.在main.js在导入封装好的对象即可使用


常见请求演示

get请求有两种写法,一个是直接拼接一个是写参数

pst请求是不可以拼接到url里的,

还有跨域的问题,这个可以好好了解一下

httpbin.org 走get请求测试

// 1.发送request请求
axios.request({
  url: "http://123.207.32.32:8000/home/multidata",
  method: "get"
}).then(res => {
  console.log("res:", res.data)
  //注意一般拿到数据是返回res.data,而不是返回一整个promise对象
})

// 2.发送get请求 直接拼接
axios.get('your_url')
  .then(response => {
    const data = response.data;
    console.log(data);
    //这样就可以拿到promise里的数据,都要做这样的一个处理,否则是一个promise对象。
  })
  
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
  console.log("res:", res.data.lrc)
})

// get请求  写参数
axios.get("http://123.207.32.32:9001/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log("res:", res.data.lrc)
})


// 3.发送post请求
axios.post("http://123.207.32.32:1888/02_param/postjson", {
  name: "coderwhy",
  password: 123456
}).then(res => {
  console.log("res", res.data)
})
// data格式
axios.post("http://123.207.32.32:1888/02_param/postjson", {
  data: {
    name: "coderwhy",
    password: 123456
  }
}).then(res => {
  console.log("res", res.data)
})



配置选项

baseURL+all

// 1.baseURL,很有用,因为大部分前面都是一样的
const baseURL = "http://123.207.32.32:8000"

// 给axios实例配置公共的基础配置  要在这里配置后才可以使用
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}

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

// 1.2.get: /home/data

// 2.axios发送多个请求
// axios.all:发送多个请求  内部是封装了一下 Promise.all而已   
axios.all([
  axios.get("/home/multidata"),
  axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {
  console.log("res:", res)   //这里返回的也是多个请求的结果
})


创建axios实例

创建自己的axios实例
不会用默认的,为每一个url创建一个实例,不同的url对应不同的实例

取决于项目,可能会从多个服务器拿数据,这样有多个实例就更方便


// axios默认库提供给我们的实例对象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")

// 创建其他的实例发送网络请求
const instance1 = axios.create({
  baseURL: "http://123.207.32.32:9001",
  timeout: 6000,
  headers: {}
})
//创建实例之后就用实例来进行操作
instance1.get("/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log("res:", res.data)
})

const instance2 = axios.create({
  baseURL: "http://123.207.32.32:8000",
  timeout: 10000,
  headers: {}
})

后面可以在封装的Axios类方法里创建多个实例传出去。


请求拦截(掌握)

基本上都会进行拦截,可以对请求做一些处理,比如
Vue3——Axios(网络请求库)

可以在拦截之后做一些配置
Vue3——Axios(网络请求库)

拦截后操作:


// 对实例配置拦截器
axios.interceptors.request.use((config) => {
  console.log("请求成功的拦截")
  // 1.开始loading的动画

  // 2.对原来的配置进行一些修改
  // 2.1. header
  // 2.2. 认证登录: token/cookie
  // 2.3. 请求参数进行某些转化

  return config
}, (err) => {
  console.log("请求失败的拦截")
  return err
})

axios.interceptors.response.use((res) => {
  console.log("响应成功的拦截")

  // 1.结束loading的动画

  // 2.对数据进行转化, 再返回数据
  return res.data
}, (err) => {
  console.log("响应失败的拦截:", err)
  return err
})

axios.get("http://123.207.32.32:9001/lyric?id=500665346").then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
})

对axios的类的封装(掌握)

用别人的库是有风险的,万一这个库不能用了,项目就会出问题,而且耦合度就太高了,修改很麻烦
Vue3——Axios(网络请求库)
解决办法,对库多封装一层,这样替换这个库的时候就直接在这个封装这里修改就好了,这样就不用全都一个个的修改,这个概念也很简单,这就是封装的好处。

这个思想真的很重要,但是这一步在项目里面就很重要,是很重要的一个思想

这个东西就很好,只有吃过亏才知道,所以这也是听课的好处,不然自己摸索不知道摸索多久

在src里面创建service的文件,用来放封装
Vue3——Axios(网络请求库)

axios请求库封装
封装源码

import axios from 'axios'

class HYRequest {
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }
//使用this来指向当前创建的实例对象
  request(config) {
    return new Promise((resolve, reject) => {
      this.instance.request(config).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }

  get(config) {
    return this.request({ ...config, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
//后面也可以在这里创建更多的方法,方式是差不多的
}

export default new HYRequest("http://123.207.32.32:9001")
//这里导出的是一个实例对象,然后你也可以创建多个实例对象导出去,这个就是比较简单了

Vue3——Axios(网络请求库)

老师封装好的一个更完全的axios库

使用于TS

在项目中用ts封装axios,一次封装整个团队受益😁文章来源地址https://www.toymoban.com/news/detail-450729.html

import axios, { AxiosResponse } from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type {
  RequestConfig,
  RequestInterceptors,
  CancelRequestSource,
} from './types'

class Request {
  // axios 实例
  instance: AxiosInstance
  // 拦截器对象
  interceptorsObj?: RequestInterceptors<AxiosResponse>

  /*
  存放取消方法的集合
  * 在创建请求后将取消请求方法 push 到该集合中
  * 封装一个方法,可以取消请求,传入 url: string|string[]  
  * 在请求之前判断同一URL是否存在,如果存在就取消请求
  */
  cancelRequestSourceList?: CancelRequestSource[]
  /*
  存放所有请求URL的集合
  * 请求之前需要将url push到该集合中
  * 请求完毕后将url从集合中删除
  * 添加在发送请求之前完成,删除在响应之后删除
  */
  requestUrlList?: string[]

  constructor(config: RequestConfig) {
    this.requestUrlList = []
    this.cancelRequestSourceList = []
    this.instance = axios.create(config)
    this.interceptorsObj = config.interceptors
    // 拦截器执行顺序 接口请求 -> 实例请求 -> 全局请求 -> 实例响应 -> 全局响应 -> 接口响应
    this.instance.interceptors.request.use(
      (res: AxiosRequestConfig) => res,
      (err: any) => err,
    )

    // 使用实例拦截器
    this.instance.interceptors.request.use(
      this.interceptorsObj?.requestInterceptors,
      this.interceptorsObj?.requestInterceptorsCatch,
    )
    this.instance.interceptors.response.use(
      this.interceptorsObj?.responseInterceptors,
      this.interceptorsObj?.responseInterceptorsCatch,
    )
    // 全局响应拦截器保证最后执行
    this.instance.interceptors.response.use(
      // 因为我们接口的数据都在res.data下,所以我们直接返回res.data
      (res: AxiosResponse) => {
        return res.data
      },
      (err: any) => err,
    )
  }
  /**
   * @description: 获取指定 url 在 cancelRequestSourceList 中的索引
   * @param {string} url
   * @returns {number} 索引位置
   */
  private getSourceIndex(url: string): number {
    return this.cancelRequestSourceList?.findIndex(
      (item: CancelRequestSource) => {
        return Object.keys(item)[0] === url
      },
    ) as number
  }
  /**
   * @description: 删除 requestUrlList 和 cancelRequestSourceList
   * @param {string} url
   * @returns {*}
   */
  private delUrl(url: string) {
    const urlIndex = this.requestUrlList?.findIndex(u => u === url)
    const sourceIndex = this.getSourceIndex(url)
    // 删除url和cancel方法
    urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1)
    sourceIndex !== -1 &&
      this.cancelRequestSourceList?.splice(sourceIndex as number, 1)
  }
  request<T>(config: RequestConfig<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      // 如果我们为单个请求设置拦截器,这里使用单个请求的拦截器
      if (config.interceptors?.requestInterceptors) {
        config = config.interceptors.requestInterceptors(config)
      }
      const url = config.url
      // url存在保存取消请求方法和当前请求url
      if (url) {
        this.requestUrlList?.push(url)
        // TODO 在axios0.22起,对CancelToken已经弃用,需要改成  AbortController 文档:https://axios-http.com/docs/cancellation
        config.cancelToken = new axios.CancelToken(c => {
          this.cancelRequestSourceList?.push({
            [url]: c,
          })
        })
      }
      this.instance
        .request<any, T>(config)
        .then(res => {
          // 如果我们为单个响应设置拦截器,这里使用单个响应的拦截器
          if (config.interceptors?.responseInterceptors) {
            res = config.interceptors.responseInterceptors(res)
          }

          resolve(res)
        })
        .catch((err: any) => {
          reject(err)
        })
        .finally(() => {
          url && this.delUrl(url)
        })
    })
  }
  // 取消请求
  cancelRequest(url: string | string[]) {
    if (typeof url === 'string') {
      // 取消单个请求
      const sourceIndex = this.getSourceIndex(url)
      sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]()
    } else {
      // 存在多个需要取消请求的地址
      url.forEach(u => {
        const sourceIndex = this.getSourceIndex(u)
        sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]()
      })
    }
  }
  // 取消全部请求
  cancelAllRequest() {
    this.cancelRequestSourceList?.forEach(source => {
      const key = Object.keys(source)[0]
      source[key]()
    })
  }
}

export default Request
export { RequestConfig, RequestInterceptors }

到了这里,关于Vue3——Axios(网络请求库)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(47)
  • 【Vue.js】Vue3全局配置Axios并解决跨域请求问题

    对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错: Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from

    2024年02月05日
    浏览(81)
  • Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(46)
  • Java网络开发(Asynchronous异步)—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

    如果想做bilibili那样的边看视频边评论怎么搞?; 之前用jsp的方式,是无法实现这个需求的,因为每次评论后提交了评论,会把整个页面全部刷新,导致视频也回到未播放的初始状态,如下所示: 代码为: 这是因为,在每次浏览器请求后,只能等待服务器的响应,即这种方

    2024年02月09日
    浏览(61)
  • vue3使用axios发送post请求,后台接收到的参数总是null,使用postman测试后台是能接收数据的

    使用vue3,连基本的请求都失败了,使用浏览器查看post请求,参数中是有值,但是传到后台,每个参数都是null,不知道哪里错了。排除了后台的错误,就剩下了vue代码的错误了。我出错的地方是vue使用axios发送post请求的时候,参数格式写错了。 直接贴代码了,正确的写法 f

    2024年02月13日
    浏览(45)
  • 这是一篇ChatGPT写的博客:vue3&js坑——在循环中发起网络请求,返回结果只有最后一次网络请求的数据

    在开发过程中,本想记录遇到的一个bug,自己写完博客之后,突发奇想,请 ChatGPT 帮我写了一篇同样内容的博客。 我需要在循环中发起网络请求,每次循环都把网络请求返回来的数据存入前端数据库RxDB中。我使用forEach方法,来实现: 上述代码是一个3次循环,每次循环都向

    2024年02月03日
    浏览(41)
  • 【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

    功能特点: 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求方式: axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, c

    2024年02月10日
    浏览(43)
  • 【axios】vue中axios的请求配置

    注意:本文实例化为TS版 axios 是一个基于 promise 封装的网络请求库,它是基于 原生XHR 进行二次封装,可以说是 XHR 的一个子集,而 XHR 又是 Ajax 的一个子集 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求

    2024年02月10日
    浏览(38)
  • vue3 axios

    2024年02月07日
    浏览(31)
  • 【vue】利用axios发送请求

    根组件App.vue 路由配置 main.js配置 固定写法,复制粘贴即可 请求失败时,控制台输出的对象 请求成功时,控制台输出的对象 保存登录返回的token 获取token const token=response.data.token 保存到LocalStorage中:永久存储,只有不手动删除,永久保存到LocalStorage中 window.localStorage.setItem(‘

    2024年02月05日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包