axios的使用
2021/6/18 23:58:08
本文主要是介绍axios的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
axios的简介:
Axios,基于Promise的HTTP客户端,可以工作于浏览器中,也可以在node.js中使用。
功能:
- 从浏览器中创建XMLHttpRequest
- 从node.js中创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止XSRF***
首先要在项目目录下使用如下命令下载axios
$ npm i axios -S
而后在src目录下创建requests文件夹,里面用来存放你整个项目的ajax请求。
此文件夹中首先创建一个index.js文件
编写里面的内容:
//引入axios import axios from 'axios'; //创建一个变量看当前环境是否是开发环境 const isDev = process.env.NODE_ENV === "development" //创建axios实例 const ajax = axios.create({ //根URL 可以在这做判断是否是在开发环境下,比如: baseURL:isDev ? 'http://rap2api.taobao.org/app/mock/160905' : '真实项目接口地址' }) //导出getInformation方法获取ajax信息 export const getInformation = ()=>{ return ajax.post('/api/stuInformation') }
(笔者是Vue项目,下方内容请自行调整)
在你的main.js文件里面编写如下内容:
//引入所有的ajax异步请求 import * as $http from './request';//你的文件目录可能与笔者不一致,需要修改 //给Vue的实例中挂载$http,赋值requests里面的所有方法 Vue.prototype.$http = $http;
在想要数据的界面里面添加created生命周期,然后调用this.$http.方法名(在requests里面定义的方法名)
然后用promise的.then() .catch()方法继续处理响应内容
将数据弄到当前组件的data里面然后用就可以了
axios添加请求响应拦截器
回到requests文件夹的index.js文件里增加内容:
//请求拦截器 axios.interceptors.request.use(config => { //加自己的业务逻辑 return config; }) //响应拦截器 axios.interceptors.response.use(res => { //加自己的业务逻辑 return res; })
发送请求携带cookie
import axios from 'axios' axios.defaults.withCredentials=true; // 让ajax携带cookie
其他的请求方法携带cookie
一、ajax 跨域携带cookie
原生ajax请求方式:
var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); xhr.withCredentials = true; //支持跨域发送cookies xhr.send();
jquery的post方法请求:
$.ajax({ type: "POST", url: "http://xxx.com/api/test", dataType: 'jsonp', xhrFields: {withCredentials: true}, crossDomain: true, })
服务器端设置:
header("Access-Control-Allow-Credentials: true"); header("Access-Control-Allow-Origin: http://www.xxx.com");
二、 fetch 带cookie跨域访问
前后端分离,用nginx做请求跨域处理。用了fetch来替代ajax,访问正常,但是请求时没带cookie,就加了credentials: “include”
var myHeaders = new Headers(); fetch(url, { method: 'GET', headers: myHeaders, credentials: "include" })
在后台配置
response.setHeader("Access-Control-Allow-Credentials","true");
三、只有会玩的程序员才能看到我 ~ 并且只有牛逼的程序员才能看懂我!
四、axios、fetch的区别
这篇关于axios的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-14system bios shadowed
- 2024-03-14gabios
- 2024-02-07iOS应用提交上架的最新流程
- 2024-02-06打包 iOS 的 IPA 文件
- 2023-12-07uniapp打包iOS应用并通过审核:代码混淆的终极解决方案 ?
- 2023-11-25uniapp IOS从打包到上架流程(详细简单) 原创
- 2023-11-10【iOS开发】iOS App的加固保护原理:使用ipaguard混淆加固
- 2023-09-30最强大的iOS应用源码保护工具:Ipa Guard,保护你的商业机密代码
- 2023-09-07iOS安全加固探讨:代码混淆、类名方法名混淆等方法
- 2023-09-05iOS代码加固与保护方法详解 - 提升iOS应用安全性的关键步骤