vue-axios使用_vue接口请求放在哪里写

vue-axios使用_vue接口请求放在哪里写什么是axiosAxios是一个基于promise的HTTP库,可以用在浏览器和node.js中。主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。a

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

什么是axios

Axios 是一个基于 promiseHTTP 库,可以用在浏览器和 node.js 中。

主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

axios有8个特性

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

安装

安装十分简单,使用 npm:

npm install axios

 

案例

执行 GET 请求

axios
  .get("请求地址", {
    // 拼接参数写在params中
    params: {
      ID: 12345,
    },
  })
  // 成功后做的事情
  .then(function (response) {
    console.log(response);
  })
  // 失败后做的事情
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios
  .post("请求地址", {
    firstName: "jkc",
    lastName: "123",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行并发请求,当我们想要同时发出2个请求,可以使用axios.all()

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

axios.all([getUserAccount(), getUserPermissions()]).then((res) => {
  console.log(res);
});

以上代码我们先定义了2个方法,每个方法都会发送一个请求,最后把2个方法都放在数组中,这样程序就会同时执行2个方法,且最后的结果是在数组中,结果如下:
vue-axios使用_vue接口请求放在哪里写
上面返回的结果是在数组中,到时候取结果的时候就要用res[0],如果你觉得这样麻烦,如果我们想展开的话,可以使用axios.spread方法

axios.all([getUserAccount(), getUserPermissions()]).then(
  axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
  })
);

此时,我们返回的结果就不是一个数组了,会分开来,结果如下:
vue-axios使用_vue接口请求放在哪里写
 

axios请求配置

以下是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间,请求将被中断
  timeout: 1000,

  // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
  // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
}

 

响应结构

发送网络请求成功后,返回的响应结构如下:

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

    // `statusText` 来自服务器响应的 HTTP 状态信息
    statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {},
  // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

 

配置默认值

配置网络请求时,你可以指定将被用在各个请求的配置默认值
 

全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';  // 配置默认的baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  // 配置默认请求头中的Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  // 配置默认的post请求方式

 

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后更改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 

拦截器

在请求或响应被 thencatch 处理前拦截它们。

// 2.1.请求拦截器
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      // 1.比如config中的一些信息不符合服务器的要求
      // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
      // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
      return config;
    },
    (error) => {
      console.log(error);
    }
  );

  // 2.2.响应拦截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (error) => {
      console.log(error);
    }
  );

 

项目中axios完整的封装

在真实项目开发中,我们会在src文件夹中创建一个utils文件夹,然后在文件夹中创建一个request.js文件,写入如下代码:

import axios from "axios";

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://xxx.xxx.xx.xx:8000",
    timeout: 5000,
  });

  // 2.1.请求拦截器
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      // 1.比如config中的一些信息不符合服务器的要求
      // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
      // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
      return config;
    },
    (error) => {
      console.log(error);
    }
  );

  // 2.2.响应拦截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (error) => {
      console.log(error);
    }
  );

  // 3.发送真正的网络请求
  return instance(config);
}

最后我们在main.js中给网络请求配置下全局属性即可

import { request } from "@/utils/request";

Vue.prototype.$request = request;

这样以后,我们在任何目录下,都可以直接使用request网络请求,不需要每次都导入了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164832.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C51单片机实验——定时器实验

    C51单片机实验——定时器实验实验名称:单片机定时器实验实验环境:普中实验系统;KeilμVision4软件;实验目的:(1)掌握单片机定时器的原理和控制方法。(2)通过编程利用定时器实现定时功能,并利用该定时功能实现时钟分、秒的功能。硬件连线:P2^1口连接led1P2^3口连接led3P2^5口连接led5P2^7口连接led7实验主要代码:/********************************************************************************

  • Android 11 应用兼容性适配,看这篇就够了

    Android 11 应用兼容性适配,看这篇就够了本文档基于谷歌Android11DeveloperPreview4(DP4)版本的变更输出一、兼容性调试工具Android11引入了新的工具,用于针对最新版平台中的行为变更来测试和调试应用。这些工具属于新的兼容性框架的一部分,可让应用开发者单独开启和关闭各项变更。有了这种灵活性,您可以关闭单项变更,然后继续针对平台中的其他变更测试应用;也可以每次单独针对一项行为变更测试应用。不管是影响所有应用的行为变更还是只影响以Android11为目标平台的应用的行为变更,您都可以随意开启或关

  • redis配置文件中常用配置详解[通俗易懂]

    redis配置文件中常用配置详解[通俗易懂]此次安装的版本为:5.0.3[root@localhostlocal]#redis-server–versionRedisserverv=5.0.3sha=00000000:0malloc=jemalloc-5.1.0bits=64build=afabdecde61000c3打开redis.cof###############################…

  • MQTT协议,终于有人讲清楚了[通俗易懂]

    MQTT协议,终于有人讲清楚了[通俗易懂]大家好,我是小麦,最近做了一个物联网的项目,顺便总结一下MQTT协议。大家都知道,MQTT协议在物联网中很常用,如果你对此还不是很了解,相信这篇文章可以带你入门。mqtt协议1MQTT协…

  • POJ 2142 The Balance(扩展欧几里德解方程)

    POJ 2142 The Balance(扩展欧几里德解方程)

  • pycharm企业版激活码【2022最新】2022.01.22

    (pycharm企业版激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1TCF2R91JZ-eyJsaWNlbnNlSWQiOi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号