「案例」vue3.2 + TS 项目中使用 jsonp 插件解决跨域请求

「案例」vue3.2 + TS 项目中使用 jsonp 插件解决跨域请求

安装 jsonp 插件

npm i jsonp

jsonp 获取数据案例

<script setup lang="ts">
import jsonp from 'jsonp'
import { ref } from 'vue'

const keyword = ref('vue')
const suggestList = ref<string[]>()

// 获取百度关键字列表
const GetSuggestList = () => {
  const url = `https://suggestion.baidu.com/su?cb=sug&wd=${keyword.value}`

  // fetch 方式（会报跨域错误）
  // fetch(url)
  //   .then((res) => res.json())
  //   .then((res) => console.log(res))

  // jsonp 方式
  jsonp(url)
}

// 这里的函数名 sug 要与给到后端的 `cb=sug` 保持一致
window.sug = (data: any) => {
  console.log(data)
  suggestList.value = data.s
}

GetSuggestList()
</script>

<template>
  <header>
    <form>
      <input type="text" v-model="keyword" /> &emsp;
      <button @click.prevent="GetSuggestList">查询百度关键字列表</button>
      <h3>百度关键字列表：</h3>
      <ul>
        <li v-for="(item, index) in suggestList" :key="index">{{ item }}</li>
      </ul>
    </form>
  </header>
</template>

<style scoped></style>

TS 中，避免报错，还需要定义一下 jsonp 的模块以及在 Window 接口中添加 sug 属性，在根目录的 env.d.ts 文件中定义即可：

/// 
declare module 'jsonp'
declare interface Window {
  sug: (res: any) => void
}

效果展示

代码解释

前端发送请求给后端时，携带了一个参数 cb=sug，后端查询好数据（data）后，就会以 sug(data) 的形式返回给前端，如下图所示：

前端会解析返回的结果并执行 window.sug && window.sug(data)，最终，我们定义的 window.sug 方法就会被执行啦。