Fram/Lib

vue-axios的基本使用

字数:1986    阅读时间:10min
阅读量:10107

原生JS我们通常会用Ajax来向服务端发送请求;但是这种方式步骤太过于繁琐,所以不同的库和框架对其进行了封装,那么在VUE中常见的封装就是vue-resource和vue-axios,vue-resource已不再维护官方推荐使用vue-axios;vue-axios是基于promise和vue封装的所以可以使用.then().catch()

在使用服务器请求框架的时候,最好不要在每一个组件页面都使用,把所有请求都放在一个特定的文件夹内,然后每个页面组件再调用,这样方便后期的维护和修改;例如我们可以把axios封装在network文件夹下的request.js文件里:

1.创建一个专门放请求的文件夹network,再创建一个放axios的文件request.js;安装vue-axios:npm install vue-axios -save

2.request.js 引入axios,创建axios实例,然后输出再创建axios实例方法

3.在需要用的文件内引入创建的文件的模块,然后再传入相关的配置

  • 请求方法别名
    • axios([config])
    • 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]])
  • 并发辅助函数
    • axios.all(iterable)
    • axios.spread(callback)
  • 创建axios实例
    • axios.create([config])
  • 请求配置
    • url:请求的服务器URL地址
    • method:创建请求时使用的方法 默认'GET'
    • baseURL:URL请求的公共部分, 'https://some-domain.com/api/'
    • headers:自定义请求头 ,{'X-Requested-With': 'XMLHttpRequest'}
    • params:URL请求 参数,{ ID: 12345}
    • data:作为请求主体被发送的数据 ,只适用于这些请求方法 'PUT', 'POST', 和 'PATCH' ,{ firstName: 'Fred'}
    • timeout: 请求超时,将会被中断,毫秒
    • withCredentials: 跨域请求时是否需要使用凭证 ,默认false
    • auth: 表示应该使用 HTTP 基础验证,并提供凭据, 会设置一个 Authorization 头,覆写掉现有的任意使用 headers 设置的自定义 Authorization头; {username: 'janedoe',password: 's00pers3cret' }
    • proxy: 定义代理服务器的主机名称和端口,这里也可以设值auth,表示 HTTP 基础验证应当用于连接代理,并提供凭据 ,会设置一个 Proxy-Authorization 头,覆写掉已有的通过使用 header 设置的自定义 Proxy-Authorization 头;{host: '127.0.0.1',port: 9000,auth: {username: 'mikeymike',password: 'rapunz3l'}}
    • cancelToken:用于取消请求的 cancel token;new CancelToken(function (cancel) {})
  • 响应属性
    • data:由服务器提供的响应;{}
    • status:来自服务器响应的 HTTP 状态码;200
    • statusText:来自服务器响应的 HTTP 状态信息;'OK'
    • headers:服务器响应的头;
    • config:为请求提供的配置信息;{}
  • 拦截器
    • 请求拦截器:axios.interceptors.request.use(function () {/*...*/});作用:
      • 处理或者过滤不符合服务器要求的请求信息
      • 在每次发送请求时都希望在页面中显示一个请求图标
      • 某些网络请求,必须携带一些特殊信息时(比如登录必须携带token)
    • 响应拦截器: axios.interceptors.response.use(function () {/*...*/}) ;作用:将数据处理后直接返回想要的数据
    • 移除拦截器:axios.interceptors.request.eject(拦截器)

野生小园猿
励志做一只遨游在知识海洋里的小白鲨
查看“野生小园猿”的所有文章 →

相关推荐