IOS教程

axios的使用

本文主要是介绍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的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!