杵桩王 发表于 2023-2-8 20:33:34

Axios

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.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.onclick = function () {
    cancel()
}
来源:https://www.cnblogs.com/ucbb/p/17101771.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页: [1]
查看完整版本: Axios