关于axios

ddongjian0000 发布于2019-08-23 15:09 / 1105人阅读

摘要：简介是一个基于的库，可以用在浏览器和中主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

简介

axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

特点

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

安装

使用 npm:

$ npm install axios
使用 bower:

$ bower install axios
使用 cdn:

使用

import axios from "axios"
import router from "../router/index"
import Message from "ant-design-vue/es/message"
import Cookies from "js-cookie"

const service = axios.create({
  baseURL: "/api", // 统一请求路径前缀
  timeout: 15000// 请求超时时间
})

service.interceptors.request.use(config => {
  let sessionId = Cookies.get("X-SESSION-ID") || ""
  if (sessionId) {
    config.headers["X-SessionId"] = sessionId // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, err => {
  Message.error("请求超时")
  return Promise.reject(err)
})

// http response 拦截器
service.interceptors.response.use(response => {
  const data = response.data
  // 根据返回的code值来做不同的处理(和后端约定)
  switch (data.code) {
    case 401:
      // 未登录 清除已登录状态
      router.push("/login")
      return Promise.reject(new Error("401"))
    case 403:
      // 没有权限
      if (data.message !== null) {
        Message.error(data.message)
      } else {
        Message.error("未知错误")
      }
      return Promise.reject(new Error("未知错误"))
    case 500:
      // 错误
      if (data.message !== null) {
        Message.error(data.message)
      } else {
        Message.error("未知错误")
      }
      // return Promise.reject(new Error("未知错误"))
      return Promise.reject(data.message)
    default:
      return data
  }
}, (err) => { // 这里是返回状态码不为200时候的错误处理
  Message.error(err.toString())
  return Promise.reject(err)
})

export default service

API使用

import request from "@/utils/request"

// 所属区域
export function getListByGroupStartAdminArea () {
  return request({
    url: "/area/getListByGroupStartAdminArea"
  })
}

// 直升机信息删除
export function deleteCopter (data) {
  return request({
    url: `/copter/deleteCopter`,
    method: "post",
    data
  })
}

页面使用

// 获取区域列表
    _getListByGroupStartAdminArea () {
      getListByGroupStartAdminArea().then(res => {
        this.options = res.payload
      })
    },

// 删除直升机信息
    handleDelete(record) {
      let copter = this
      this.$confirm({
        title: "直升机信息删除",
        content: "请确认是否将此直升机删除？",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          deleteCopter({
            id: record
          }).then(res => {
            copter.$message.error("删除成功!")
            copter._getCopterList()
          })
        },
        onCancel() {}
      })
    },

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101609.html

记录关于axios封装

摘要：废话不多说，直接上代码，本人也是菜鸡如果有什么不对请指教为组件的插件按需引入。引入设置请求时间响应拦截器如果返回的状态码为，说明请求数据成功注是我和公司后台约定的状态码，具体的随机应变否则的话抛出错误请求不存在封装方法封装请求废话不多说，直接上代码，本人也是菜鸡如果有什么不对请指教~ps: message为iview组件的插件按需引入。 // 引入axios import ax...

testbird 2019-08-23 17:07 评论0 收藏0
关于axios以及jsonp的简单使用方法

摘要：前端框架作者推荐使用进行数据请求，的使用方法非常简单，最近在使用碰到个小问题，于是记录一下如果是管理前端项目的话，直接安装就好，如果不是，那么直接引用就行了使用的时候在页面的中引入，下面是的函数式写法这里使用箭头函数，那么下面的指向就 vuejs前端框架作者推荐使用axios进行数据请求，axios的使用方法非常简单，最近在使用vuejs碰到个小问题，于是记录一下：1.如果是npm管理...

ARGUS 2019-08-20 18:35 评论0 收藏0
关于axios会发送两次请求，有个OPTIONS请求的问题

当时项目为了解决这个问题自闭了一个下午.....上网找了很多的文章看，几乎都没有根治方法，但是最后还是被我搞定了[]~(￣▽￣)~*　问题描述： Vue的开发者都知道axios，很多都用axios来进行数据交互，axios的默认请求头是Content-Type: application/json使用这个请求头会出现向服务器请求两次的情况为什么呢？原因是：浏览器会首先使用 OPTIONS 方法发...

weij 2019-08-26 12:13 评论0 收藏0
关于Vue/axios下跨域cookie的处理

摘要：凡事有例外，以下分别对待不同情况服务器端配置即可客户端配置，这样大部分浏览器都支持跨域了，反正新版本下无问题。但放在默认设置下依然出现无法获取的问题，至此，查资料查到解决存取的跨域问题，依照文中记载，在追加的响应头，解决了下的问题。一般在生产环境下尽量可以通过nginx等反向代理，把vue前端和api接口处理成同一端口和域名。在开发和测试时，也可以使用兼容性比较好的浏览器进行。凡...

Mike617 2019-07-25 13:54 评论0 收藏0
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

摘要：写在前面最近在学习，遇到有些页面请求数据需要用户登录权限服务器响应不符预期的问题，但是总不能每个页面都做单独处理吧，于是想到提供了拦截器这个好东西，再于是就出现了本文。 1.写在前面最近在学习Vue2，遇到有些页面请求数据需要用户登录权限、服务器响应不符预期的问题，但是总不能每个页面都做单独处理吧，于是想到axios提供了拦截器这个好东西，再于是就出现了本文。 2.具体需求用户鉴...

Tikitoo 2019-08-22 14:01 评论0 收藏0