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的区别

在这里插入图片描述关于umi-request更多内容请看：github.com/umijs/umi-r…