axios

丝 · 2024-7-27 01:05:32

json-server 快速搭建http服务

json-server包快速搭建http服务

axios

axios特性

axios界说

axios 就是一个建立在HTTP客户端的Promise对象用于浏览器和nodejs发送Ajax请求

browser 端发送AJax请求
Nodejs端发送http请求

支持PromiseAPI
请求响应拦截器
对请求和响应数据做转换
取消请求
自动将结果转化为JSON数据
做保护拦截跨站攻击

axios安装

npm install axios
npm uninstall axios

axios基础设置

axios常用属性：method url data请求体
get请求：得到post/2 的数据信息

因为axios返回结果是一个Promise对象所以其后可以跟
.then 指定成功的回调

post发送：上传一份post数据

put请求：进行数据更新

delete：删除数据

buts[0].onclick=function(){
//发送axios put请求
axios({
method:'get',
url:'http://localhost:3000/post/2',
}).then(response=>{
console.log(response);
});
}
buts[1].onclick=function(){
//发送axios post请求
axios({
method:'post',
url:'http://localhost:3000/post',
//设置响应体
data:{
'title':"你好中国",
'author':"赵四"
}
}).then(response=>{
console.log(response);
});
}
buts[2].onclick=function(){
//发送axios put请求
axios({
method:'put',
url:'http://localhost:3000/post/2',
//put修改数据
data:{
author:"张三"
}
}).then(response=>{
console.log(response);
});
}
buts[3].onclick=function(){
//发送axios delete请求
axios({
method:'delete',
url:'http://localhost:3000/post/7c59',
}).then(response=>{
console.log(response);
});
}

复制代码

axios其他利用方式（axios常用方法）

axios.request()

得到所有批评

axios.post()

添加批评

axios响应

response

response结果
config 设置对象

data 响应体

axios自动将服务器返回结果进行json解析，转成对象，方便对结果进行处理

headers 响应头信息

行头空行体
request 原生AJax请求对象

request属性所保存的就是当前AJax发送请求时所创建的AJax请求对象
status 响应状态码

statusText 响应状态字符串

axios请求对象

指axios在调用时所接受的参数对象
请求设置 | Axios中文文档 | Axios中文网 (axios-http.cn)
不但指axios请求对象的参数对象，还包括request post等他们当中都用到config设置对象
{
url:'',
method:'',
baseURL:'',
// `transformRequest` 答应在向服务器发送前，修改请求数据
        // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
        // 数组中末了一个函数必须返回一个字符串，一个Buffer实例，ArrayBuffer，FormData，或         Stream
        // 你可以修改请求头。
        transformRequest: [function (data, headers) {
        // 对发送的 data 进行恣意转换处理

        return data;
        }],

        // `transformResponse` 在传递给 then/catch 前，答应修改响应数据
        transformResponse: [function (data) {
        // 对吸收的 data 进行恣意转换处理

        return data;
        }],

        //自界说请求头
        headers: {'X-Requested-With': 'XMLHttpRequest'},

        // `params` 是与请求一起发送的 URL 参数
        // 必须是一个简单对象或 URLSearchParams 对象
        params: {
        ID: 12345
        },
        data: {
        firstName: 'Fred'
        },//传递json情势的数据要求请求体为json情势
        data: 'Country=Brasil&City=Belo Horizonte',
//传递URL参数情势要求请求体为URL参数情势
        // `timeout` 指定请求超时的毫秒数。
        // 如果请求时间凌驾 `timeout` 的值，则请求会被停止
        timeout: 1000, // 默认值是 `0` (永不超时)
}