jsonp

• 在前端开发中，我们一种常见的网络请求方式就是JSONP

  • 使用JSONP最主要的原因往往是为了解决跨域访问的问题

• JSONP的原理是什么呢？

  • JSONP的核心在于通过script标签的src属性来帮助我们请求数据.
  • 原因是我们的项目部署在domain1.com服务器上时，是不能直接访问domain2.com服务器上的资料的.
  • 这个时候，我们利用script标签的src帮助我们去服务器请求到数据，将数据当作一个javascript的函数来执行，并且执行的过程中传入我们需要的json
  • 所以，封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称

• jsonp如何封装呢？

  let count = 1
  export default function originPJSONP(option) {
    // 1. 从传入的option中提取url
    const url = option.url
  
    // 2. 在body中添加script标签
    const body = document.getElementsByTagName('body')[0]
    const script = document.createElement('script')
  
    // 3. 内部产生一个不重复的callback
    const callback = 'jsonp' + count++
  
    // 4. 监听window上的jsonp的调用
    return new Promise((resolve, reject) => {
      try {
        window[callback] = function (result) {
          body.removeChild(script)
          resolve(result)
        }
        const params = handleParam(option.data)
        script.src = url + '?callback=' + callback + params;
        body.appendChild(script)
      } catch (e) {
        body.removeChild(script)
        reject(e)
      }
    })
  }
  function handleParam(data) {
    let url = ''
    for (let key in data) {
      let value = data[key] !== undefined ? data[key] : ''
      url += `&${key}=${encodeURIComponent(value)}`
    }
    return url
  }
  

axios

axios的使用

• 为什么选择axios？

  • 在浏览器中发送XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持PromiseAPI
  • 拦截请求和响应
  • 转换请求和响应数据
  • 等等

• 支持多种请求方式：

  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[,config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

• 安装axios

  npm install axios --save
  

• 使用方式：

  普通方式

  axios({
    //url: 'http://httpbin.org', // 测试网站
    url: 'localhost://8000/menu/multidata',	// 自定义一个springboot的服务器
    method: 'get'				 // 指定提交方式，axios(context)不指定默认为get方式
  }).then(result => {
    console.log(res)
  })
  

  get  / post方式

  axios({
    url: 'http://localhost:8000/menu/queryMenu',
    // 专门针对get请求的一个写法
    params: {
      menuCode: '1'
    }
  }).then(result=>{
    console.log(result);
  })
  axios.post('http://localhost:8000/menu/addMenu',{
    menuCode: 2,
    menuName: '我的',
    order: 2
  }).then(() => {
    console.log('success');
  }).catch(e=>{
    console.log('error');
  })
  

axios的配置

全局配置

• 在上面的实例中，我们的BaseUrl是固定的

  • 事实上，在开发中很多参数都是固定的
  • 这个时候我们可以进行一些抽取，也可以利用axios的全局配置

  axios.defaults.baseURL = 'http://localhost:8000'
  axios.defaults.timeout = 50
  

常见配置

url、

method、

baseURL、

transformRequest:[function(data{})] 请求前数据处理、

transformResponse:[function(data){}]请求后数据处理

headers:['x-Request-With':'XMLHttpRequest']自定义的请求头、

params、

paramsSerializer:function(params){} 查询对象序列化函数、

data:{key:'aa'} request body、

timeout、

withCredentials 是否携带token、

adapter:function(resolve, reject, config){} 自定义请求处理、

auth: {userName: '', pwd:''} 身份验证的信息

responseType: '' 响应数据格式：json/blob/document/arraybuffer/texst/stream