浏览器正常 vue axios jsonp

原创

mob64ca12f49f4b 2024-03-04 06:20:14 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f49f4b的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现“浏览器正常 vue axios jsonp”

前言

作为一名经验丰富的开发者，我将会教你如何在浏览器中正常使用vue，axios和jsonp。在本文中，我会先介绍整个流程的步骤，并给出每一步需要做的具体指导和代码示例。

流程步骤

gantt
    title 浏览器正常 vue axios jsonp 实现流程
    section 设置环境
    安装VueCLI：done, 2021-01-01, 1d
    安装axios：done, 2021-01-02, 1d
    section 实现功能
    创建Vue应用：done, 2021-01-03, 1d
    使用axios发送请求：done, 2021-01-04, 2d
    使用jsonp跨域请求：done, 2021-01-06, 2d

具体步骤及代码示例

步骤一：设置环境

安装VueCLI

npm install -g @vue/cli

步骤二：实现功能

创建Vue应用

在命令行中执行以下命令，创建一个Vue应用：

vue create my-vue-app

使用axios发送请求

首先安装axios：

npm install axios

在需要发送请求的地方，引入axios并发送请求：

// 导入axios
import axios from 'axios';

// 发送GET请求
axios.get('
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

使用jsonp跨域请求

首先安装jsonp库：

npm install jsonp

在需要发送跨域请求的地方，引入jsonp并发送请求：

// 导入jsonp
import jsonp from 'jsonp';

// 发送跨域请求
jsonp(' null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});