草庐IT

Axios

K-L‘s Blog 2023-03-28 原文

Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

服务器端

使用json-server

1. axios基本使用

// 1.GET
axios({
    method: 'GET',
    url: 'http://localhost:3000/posts/2'
}).then(res => {
    console.log(res);
})

// POST
axios({
    method: 'POST',
    url: 'http://localhost:3000/posts',
    data: {
        title: 'test',
        author: 'lll'
   }
}).then(res => {
    console.log(res);
})

// PUT
axios({
   method: 'PUT',
    url: 'http://localhost:3000/posts/3',
    data: {
        title: 'test',
        author: 'new-lll'
    }
}).then(res => {
    console.log(res);
})

// DELETE
axios({
    method: 'DELETE',
    url: 'http://localhost:3000/posts/3',
}).then(res => {
    console.log(res);
})

2. 其他请求方法

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

// request
axios.request({
    method: 'GET',
    url: 'http://localhost:3000/posts/2'
}).then(res => {
    console.log(res)
})

// POST
axios.post(
    'http://localhost:3000/comments',
    {
        "body": "other",
       "postId": 2
    }
).then(res => {
    console.log(res)
})

3. axios默认配置

// default setting
axios.defaults.method = 'GET'
axios.defaults.baseURL = 'http:localhost:3000'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

4. axios创建实例对象

// 创建实例对象
const obj = axios.create({
    baseURL: 'http://localhost:3000'
})
// obj实例和axios对象几乎相同
obj({
   url: 'posts/2'
}).then(res => {
    console.log(res)
})

5. axios拦截器

/**
 * 拦截器实质是函数
 * 请求拦截器，在请求发出时检查请求的参数等是否正确
 * 响应拦截器，在接受响应前，对响应进行预处理
*/
// 请求拦截器
axios.interceptors.request.use(functio(config) {
    console.log('req success')
    return config
}), function (error) {
    console.log('req fail')
    return Promise.reject(error)
}

// 接收拦截器
axios.interceptors.response.use(functio(response) {
    console.log('res success')
    return response;
}, function (error) {
    console.log('res fail')
    return Promise.reject(error);
});

6. 取消请求

let cancel = nul
btns[0].onclick = function () {
    // 检查上一个请求是否结束
    if (cancel !== null) {
        cancel()
    }
    axios({
        url: '/posts',
        cancelToken: new axios.CancelTok(function executor(c) {
            cancel = c;
        })
    }).then(res => {
        cancel = null
        console.log(res)
    })
btns[1].onclick = function () {
    cancel()
}
Axiosaxios拦截器consoleJavaScript

有关Axios的更多相关文章

  1. javascript - Node.js、Vue.js 和 Passport.js。 .isAuthenticated() 总是返回 false？可能是 Axios header ？ - 2

    我正在将一个项目转移到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>

  2. javascript - axios 并发请求数 : any way to get the results from the successful requests even if some have failed? - 2

    我正在尝试了解如何在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

  3. javascript - 使用 axios post 捕获错误正文 - 2

    我从我的后端代码发送一个状态代码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)

  4. javascript - Axios 未在请求中发送自定义 header (可能是 CORS 问题) - 2

    我遇到了一个问题，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

  5. javascript - 在 axios 超时后得到通知 - 2

    我有一个使用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':

  6. javascript - 使用 axios 获取访问 token - 2

    我正在使用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

  7. javascript - 如何使用 Axios 从 JSON 中获取数据？ - 2

    我正在尝试使用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:

  8. javascript - Laravel 5.5 Axios POST 导致 419 错误 - 2

    我正在尝试从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-

  9. javascript - 语法错误 : Unexpected identifier with axios - 2

    我正在尝试按如下方式使用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:

  10. javascript - 用于使用游标对 api 进行分页的 Axios 递归 - 2

    如何使用axios对带有游标的API进行分页？我想递归调用此函数直到response.data.length并在完成后返回包含集合中所有项目的整个数组。另外，值得注意的是，我必须将光标传递到后续调用中。functiongetUsers(){returnaxios.get('/users')//APIsupportsacursorparam(?after=).then(response=>{//returnsanarraywithacursor//seeresponsebelowconsole.log(response.data)})}示例响应:{"total":100,"data":[

随机推荐