美文网首页JavaScriptvue
axios扩展jsonp,不引入第三方库

axios扩展jsonp,不引入第三方库

作者: JuvenileAndSea | 来源:发表于2020-09-04 17:13 被阅读0次

    在vue中使用axios是有时候会用到jsonp前端跨域,记录下一

    import axios from 'axios'
    import Qs from 'qs'
    /**
     * jsonp跨域
     * @param {String} url [请求地址]
     * @param {Object} params [请求携带参数]
     */
    axios.jsonp = (url, params) => {
      if (!url) {
        console.error('至少需要一个url参数!')
        return
      }
      return new Promise((resolve, reject) => {
        window.jsonCallBack = (result) => {
          resolve(result)
        }
        const JSONP = document.createElement('script')
        JSONP.type = 'text/javascript'
        JSONP.src = `${url}${Qs.stringify(params)}&callback=jsonCallBack`
        document.getElementsByTagName('head')[0].appendChild(JSONP)
        setTimeout(() => {
          document.getElementsByTagName('head')[0].removeChild(JSONP)
        }, 500)
      })
    }
    
    /**
     * 接口方法
     * @param {String} url [请求地址]
     * @param {Object} params [请求携带参数]
     */
    const getJsonp= function (url, params) {
      return new Promise((resolve, reject) => {
        axios
          .jsonp(url, params)
          .then(res => {
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
    }
    // 使用
    getJsonp(请求地址,请求携带参数).then(res=>{
    }).catch(error => {
       console.log(error )
    })
    

    相关文章

      网友评论

        本文标题:axios扩展jsonp,不引入第三方库

        本文链接:https://www.haomeiwen.com/subject/gdxtektx.html