前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

vue-axios封装请求(十二)

首页
2018-08-28 15:35:32
Front-End
Vue

# 一、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

# 二、axios基础

  • 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]])

# 三、执行 GET 请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (res) {
    console.log(res);
})
.catch(function (error) {
    console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
@前端进阶之旅: 代码已经复制到剪贴板

# 四、执行 POST 请求

axios.post('/user', {
    userId:"123"
},{
    headers:{
        token:"abc"
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (error) {
    console.log(error);
});
@前端进阶之旅: 代码已经复制到剪贴板

# 五、通过配置方式发送请求

get请求是发送参数,在params中定义。而POST请求是发送request body,需要在

fe
  • 一、axios 简介
  • 二、axios基础
  • 三、执行 GET 请求
  • 四、执行 POST 请求
  • 五、通过配置方式发送请求
  • 六、执行多个并发请求
  • 七、全局拦截
  • 八、请求封装、异常统一处理
    • 8.1 axios 请求封装
    • 8.2 axios请求异常统一处理
    • 8.3 vue 项目中使用该方法
  • 九、接口封装处理
    • 9.1 axios的封装
    • 9.2 环境的切换
    • 9.3 设置请求超时
    • 9.4 请求拦截
    • 9.5 响应的拦截
    • 9.6 封装get方法和post方法
    • 9.7 api的统一管理
    • 9.8 完整封装代码

← vue实例方法(十三)vue路由(十一) →