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的区别
关于umi-request更多内容请看:https://github.com/umijs/umi-request/blob/master/README_zh-CN.md