Axios

1. axios的简介

1.1 axios是什么

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

1.2 axios特征

  • 从浏览器创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防御[XSRF]

2. axios的使用

2.1 axios的API

  • axios(config): 通用的发送任意请求的方式

  • axios(url[, config]): 可以只指定url发送get请求

  • axios.request(config): 等同于axios(config)

  • axios.get(url[, config]): 发送get请求

  • axios.delete(url[, config]): 发送delete请求

  • axios.post(url[, data[, config]]):发送post请求

  • axios.put(url[, data[, config]]): 发送put请求

  • axios.patch(url[, data[, config]]): 发送patch请求

  • axios.head(url[, config])

  • axios.options(url[, config])

  • axios.defults.xxx:请求的默认全局配置

  • axios.interceptors.request.use(): 添加请求拦截器

  • axios.interceptors.response.use(): 添加响应拦截器

  • 有时候, 我们可能需求同时发送两个请求,使用axios.all, 可以放入多个请求的数组. axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

2.2 常见的配置选项

  • 请求地址

  • url: '/user',

  • 请求类型

  • method: 'get',

  • 请根路径

  • baseURL: 'http://www.mt.com/api',

  • 请求前的数据处理

  • transformRequest:[function(data){}],

  • 请求后的数据处理

  • transformResponse: [function(data){}],

  • 自定义的请求头

  • headers:{'x-Requested-With':'XMLHttpRequest'},

  • URL查询对象

  • params:{ id: 12 },

  • 查询对象序列化函数

  • paramsSerializer: function(params){ }

  • 请求体

  • data: { key: 'aa'},

  • 超时设置

  • timeout: 1000,

2.3 安装axios

第一种方式: 使用npm

javascript 复制代码
npm install axios

第二种方式: 使用cdn

javascript 复制代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

第三种方式: 使用yarn

java 复制代码
yarn add axios

2.4 vue3使用axios发送请求

  1. 安装axios插件

    java 复制代码
    npm install axios 
  2. 在main.js文件使用axios

    javascript 复制代码
    import axios from 'axios'
    const app = createApp(App);
    //使用axios, 并把axios作为app的全局属性
    app.config.globalProperties.$axios=axios;
    app.mount('#app')
  3. axios发送get请求demo:

    javascript 复制代码
    this.$axios.get("https://autumnfish.cn/cloudsearch?keywords=" + this.query)
     				.then(function(response) {
     					console.log(response)
     					that.musicList = response.data.result.songs;
     				}, function(err) {});
    
    
    this.$axios.get("https://autumnfish.cn/api/joke/list?num=10").then(function(response){
                            // console.log(response)
                            console.log(response.data);
                            console.log(that.joke);
                            that.joke = response.data;
                        },function (err) {  }) 

跨域请求:默认不支持跨域请求

复制代码
解决客户端跨域问题:
javascript 复制代码
解决客户端跨域问题:
devServer: {
    host: 'localhost',  // 此前端项目的IP地址
    port: 8080,  // 此前端项目的端口号
    open: true,  //表示在启动开发服务器时,会自动打开浏览器并访问指定的地址
    proxy: {
      '/api': {
        target: 'https://www.kuaikanmanhua.com/', //接口域名
        changeOrigin: true,       //是否跨域
        ws: true,            //是否代理 websockets
        secure: true,          //是否https接口
        pathRewrite: {
          '^/api': ''  //假如我们的地址是 /api/member/getToken 会转化为 /member/getToken
        }
      }
    }
  }
javascript 复制代码
//服务端的跨域请求
    @CrossOrigin
    @GetMapping("{currentPage}/{pageSize}")
    public ResponseData<Page<User>> getPage(@PathVariable int currentPage, @PathVariable int pageSize, UserConditionVO userConditionVO){
        Page<User> page = userService.getPage(currentPage,pageSize, userConditionVO);
        return ResponseDataUtil.buildOk(page);
    }

3.封装axios的工具

安装qs

javascript 复制代码
# npm安装
npm install qs
# yarn 安装
yarn add qs

在src目录下创建一个utils目录,用于存放一些工具的js文件, 在这个目录下我们创建一个request.js用于封装axios

javascript 复制代码
import axios from 'axios'
import qs from 'qs'
/**
 * axios的传参方式:
 * 1.url 传参 一般用于Get和Delete 实现方式:config.params={JSON}
 * 2.body传参 实现方式:config.data = {JSON},且请求头为:headers: { 'Content-Type': 'application/json;charset=UTF-8' }
 * 3.表单传参 实现方式:config.data = qs.stringify({JSON}),且请求头为:且请求头为:headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
 */
// axios实例
const $http = axios.create({
	baseURL: '',
	timeout: 60000,
	headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})
 
// 请求拦截器
$http.interceptors.request.use(
	(config) => {
		// 追加时间戳,防止GET请求缓存
		if (config.method?.toUpperCase() === 'GET') {
			config.params = { ...config.params, t: new Date().getTime() }
		}
		
		if (Object.values(config.headers).includes('application/x-www-form-urlencoded')) {
			config.data = qs.stringify(config.data)
		}
		return config
	},
	error => {
		return Promise.reject(error)
	}
)
 
// 响应拦截器
$http.interceptors.response.use(
	response => {
		const res = response.data
		return res
	},
	error => {
		return Promise.reject(error)
	}
)
 
// 导出 axios 实例
export default $http

在main.js中,把$http绑定到app对象上

javascript 复制代码
// 导入封装好的axios并挂载到Vue全局属性上
import $http from './utils/request'
app.config.globalProperties.$http = $http

使用:

javascript 复制代码
 methods: {
        sendAjax(){
            this.$http.get("https://autumnfish.cn/cloudsearch?keywords=" + this.query)
 				.then(function(response) {
 					console.log(response)
 				}, function(err) {});
        }
    },
相关推荐
懒大王爱吃狼30 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
阿伟*rui2 小时前
配置管理,雪崩问题分析,sentinel的使用
java·spring boot·sentinel
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
XiaoLeisj3 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
paopaokaka_luck4 小时前
【360】基于springboot的志愿服务管理系统
java·spring boot·后端·spring·毕业设计
dayouziei4 小时前
java的类加载机制的学习
java·学习
Yaml45 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~5 小时前
Spring Boot详解:从入门到精通
java·spring boot·后端
hong1616886 小时前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端
aloha_7896 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot