Axios是Ajax的一个框架，简化Ajax操作
Axios执行Ajax的操作：
1. 添加axios的js文件
<script language="JavaScript" src="script/axios.min.js"></script>2.1 客户端向服务端异步发送普通参数值
格式：
axios().then().catch()-示例：
axios()({
methods:"POST"
url:"...." //发送数据信息至....(后端代码“艺名”)
params:({
key1:value,
key2:value
.
.
.
})
})
.then(function(value){ }) //axios发送成功后给予的回应
.catch(function(reason){ }) //axios发送失败后的回应，reason.response.data可以获取到相应内容
reason.message / reason.stack 可以查看错误的信息2.2 客户端向服务器发送JSON格式的数据
- JSON：是一种数据格式，如XML
- XML表示两组数据格式：（格式较为清晰）
<students>
<student sid="s001">
<sname>jim</sname>
<age>18</age>
</student>
<student sid="s002">
<sname>tom</sname>
<age>16</age>
</student>
</students>JSON格式：（JSON表达更为简洁，更能够节约网络带宽）
[{sid:"s001",age:18},{sid:"s001",age:16}]完整代码：
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload=function(){
var vue = new Vue({
"el":"#div0",
data:{
msg:1
},
methods:{
changeMsg:function(){
this.msg = this.msg + 1 ;
}
},
/*vue对象创建之前*/
beforeCreate:function(){
console.log("beforeCreate:vue对象创建之前---------------");
console.log("msg:"+this.msg);
},
/*vue对象创建之后*/
created:function(){
console.log("created:vue对象创建之后---------------");
console.log("msg:"+this.msg);
},
/*数据装载之前*/
beforeMount:function(){
console.log("beforeMount:数据装载之前---------------");
console.log("span:"+document.getElementById("span").innerText);
},
/*数据装载之后*/
mounted:function(){
console.log("mounted:数据装载之后---------------");
console.log("span:"+document.getElementById("span").innerText);
},
beforeUpdate:function(){
console.log("beforeUpdate:数据更新之前---------------");
console.log("msg:"+this.msg);
console.log("span:"+document.getElementById("span").innerText);
},
updated:function(){
console.log("Updated:数据更新之后---------------");
console.log("msg:"+this.msg);
console.log("span:"+document.getElementById("span").innerText);
}
});
}
</script>
</head>
<body>
<div id="div0">
<span id="span">{{msg}}</span><br/>
<input type="button" value="改变msg的值" @click="changeMsg"/>
</div>
</body>
</html>后端代码
package com.xx.axios;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/axios01.do")
public class Axios01Servlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String uname = request.getParameter("uname");
String pwd = request.getParameter("pwd");
System.out.println("uname = " + uname + "\n" + "pwd = " + pwd);
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charast=utf-8");
PrintWriter out = response.getWriter();
out.println(uname + "_" + pwd); //返回至客户端（then中）
throw new NullPointerException("故意抛出空指针异常！");
}
}
2.2 客户端向服务端异步发送JSON格式数据
1）客户端中params需要修改为 data；
2）服务器获取参数值不再是 request.getParameter（若使用此方法，则无法接收到数据）
而是：
//stringbuffer是可变字符串，本质是一个可变的字符数组
StringBuffer stringBuffer = new StringBuffer("");
//StringBuilder stringBuilder = new StringBuilder();
//由于请求数据有可能很大，所以使用Sevlet标准在设计API时，通过输入流来获取
BufferedReader reader = request.getReader();
//声明临时变量
String str = null;
//循环读取str中读取的数据
while ((str = reader.readLine()) != null){
stringBuffer.append(str);
}
//累加的结果即为整个请求体
str = stringBuffer.toString();则str的内容如下：
3）将（JSON格式的）String转化为User Object ( 需要使用第三方GSON )
2.3 服务器端给客户端响应JSON格式字符串，然后客户端需要将字符串转化为js Object
MIME类型参考：
<mime-mapping>
<extension>mp4</extension>
<mime-type>video/mp4</mime-type>
</mime-mapping>
<mime-mapping>
<extension>doc</extension>
<mime-type>application/msword</mime-type>
</mime-mapping>
<mime-mapping>
<extension>json</extension>
<mime-type>application/json</mime-type>
</mime-mapping>
<mime-mapping>
<extension>html</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
我正在将一个项目转移到Vue.js，但我无法让我的任何中间件检查用户是否已登录或检查用户对工作的所有权。经过无休止的搜索，我认为问题是我从客户端发送到服务器的header不包含Passport序列化用户或其他内容？我怎样才能使它工作？这是我在后端的登录路径:router.post("/login",function(req,res,next){if(!req.body.username||!req.body.password){res.send("Error");}elseif(req.body.username.length>40||req.body.password.length>
我正在尝试了解如何在javascript中处理并发异步请求，您是否知道使用axios获取成功请求结果的方法，即使请求失败了？如果不是，您将如何处理这种情况？varaxios=require('axios')varoptions=[{baseURL:'https://some-base-url',url:'/some-path&key=some-key',method:'post',data:'some-data'},{baseURL:'https://some-base-url',url:'/some-path&key=some-key',method:'post',data:'som
我从我的后端代码发送一个状态代码422，响应正文包含错误描述。我正在使用如下的axiospost来发布请求:post:function(url,reqBody){constrequest=axios({baseURL:config.apiUrl,url:url,headers:{'Content-Type':'application/json','Authorization':sessionStorage.getItem('token')},method:'POST',data:reqBody,responseType:'json'});returnrequest.then((res)
我遇到了一个问题，axios似乎没有随我的请求发送自定义header。我是这样使用它的:axios({method:'get',url:'www.my-url.com',headers:{'Custom-Header':'my-custom-value'}})但是，查看发送到服务器的实际请求，自定义header似乎并不在任何地方。REQUESTHEADERS:Accept:*/*Accept-Encoding:gzip,deflate,brAccept-Language:es-ES,es;q=0.9Access-Control-Request-Headers:custom-header
我有一个使用axios的API调用。超时设置为2500毫秒。我想要的是axios在超时后返回一个值，这样我就可以通知用户请求由于某些服务器或网络错误而中止。我是如何初始化超时的constinstance=axios.create();instance.defaults.timeout=2500;下面是超时后应该返回值的函数_post(url,body,token){returnnewPromise((resolve,reject)=>{instance.post(url,body,{headers:{'Accept':'application/json','Content-Type':
我正在使用LyftAPI，并试图弄清楚如何使用带有Node脚本的axios获取访问token。我可以使用Postman手动获取访问token，方法是填写如下表单:当我填写表格时，我可以成功地从Lyft获得一个新token。我试图通过这样做将其转换为使用axios的POST请求:varaxios=require('axios');vardata={"grant_type":"client_credentials","scope":"public","client_id":"XXXXXXXXX","client_secret":"XXXXXXXX"};varurl="https://api
我正在尝试使用Axios在表中以JSON格式获取服务器端数据，但无法理解如何获取每个字段，如id、companyInfo等。json:[{"id":1,"companyInfo":1,"receiptNum":1,"receiptSeries":"АА","customerName":"Mark","customerSurname":"Smith","customerMiddleName":"Jk","customerPhone":"0845121","services":[2,16]}]axios:store.dispatch((dispatch)=>{dispatch({type:
我正在尝试从Vue向我的LaravelAPI发出POST请求。X-CSRF-TOKENheader设置正确(我在发送到服务器的POST包中看到了这一点)。路由有默认的web-middleware。请求Accept:application/json,text/plain,*/*Accept-Encoding:gzip,deflateAccept-Language:de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7Connection:keep-aliveContent-Length:2Content-Type:application/json;charset=UTF-
我正在尝试按如下方式使用axios:importaxiosfrom'axios';axios.post("http://localhost:3000/test",{"prop1":"value"},{headers:{'X-Custom-Header':'foobar'}})然后编译器报错:/home/developer/Desktop/reason/interoperate/src/Ax.js:1(function(exports,require,module,__filename,__dirname){importaxiosfrom'axios';^^^^^SyntaxError:
如何使用axios对带有游标的API进行分页？我想递归调用此函数直到response.data.length并在完成后返回包含集合中所有项目的整个数组。另外，值得注意的是，我必须将光标传递到后续调用中。functiongetUsers(){returnaxios.get('/users')//APIsupportsacursorparam(?after=).then(response=>{//returnsanarraywithacursor//seeresponsebelowconsole.log(response.data)})}示例响应:{"total":100,"data":[