前端请求地址的几种方法

作为一名前端工程师，请求后台接口获取数据是必然的，也是要求前端人员需要掌握的必备技能。我们知道，前端除了样式的编写之外，最重要的莫过于数据的渲染。数据一般而言都是从后端获取的。下面是我将介绍几种常见的请求方法。

最原始的数据请求方法

我们在写HTML时，当我们想引用外部资源时，通常会在script标签内引用，比如引入Vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

是的，用script 标签就是最原始的请求方式之一，我们知道，不论在何种环境下，我们都可以用这种方法引用外部资源。所以我们可以使用这种方法实现跨域请求，jsonp就是基于script标签实现的。

jsonp实现

jsonp的实现过程大致如下：

• 申明一个回调函数比如 var hello =function(){}
• 创建一个script标签，url带上回调函数这个参数，类似?callback=hello
• 服务器接收到请求后，就会根据你传入的参数格式，将你需要的数据以hello(‘这是你需要的数据’) 这种形式返回给你。
• 客户端接收到服务器返回的数据之后，调用执行之前声明的回调函数（hello），对返回的数据进行操作。
  代码实现如下：

//申明一个执行函数
function run(data){
console.log(data)
}
//创建script 标签
 const port=8080
 const url=`http://localhost:${port}`
 var script = document.createElement('script')
 script.src = url+'callback='+run  
//即请求网址为:http://localhost:8080?callback=run   

服务端代码

const http = require('http');
const hostname = '192.0.0';
const port = 8088;
const querystring = require('querystring');
const server = http.createServer((req, res) => {
  var params = querystring.parse(req.url.split('?')[1]);
  var fn = params.callback;
  res.writeHead(200, { 'Content-Type': 'text/javascript' });
  res.write(fn + '(' + JSON.stringify(params) + ')');
  res.end()
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

这样，当我们从客户端创建script请求的时候，通过在请求的url上添加回调函数，在接受到服务器返回的数据的时候，由于先前和服务器约定好，所以，会在客户端上执行回调函数。从而进行操作。

AJAX请求

从上面我们知道，jsonp虽然可以实现跨域请求，但是有一个最大的缺陷，他只能发送get请求。并且，jsonp返回的其实是一段js回调函数，所以，从数据传输来说，也有点缺陷。而ajax正好能够解决以上的问题
原生ajax创建过程：

• 定义一个新的XMLHttpRequest对象
• 定义请求方式
• 监听请求状态
• 发送
  实现代码：

var request= new XMLHttpRequest()
request.open('get/post',url)
request.setRequestHeader('content-type','application/x-www-form-urlencoded')
request.onreadystatechange=function(){
    if(request.readyState==4){
        if(request.status==200){
            console.log('success')
        }
    }
}
request.send(params)

Axios

Axios是基于ajax封装的一种请求方式，他返回的是一个promise对象。以下是关于Axios请求的一般方式。

• GET

//参数添加形式一
axios.get('/user?ID=12345').then(response=>{
    console.log('success')
})

//参数添加形式二
axios.get('/user',{
    params:{
        ID:12345
    }
})

• POST

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }).then(response=>{
     consol.log('success')
  })

• GET/POST

axios({
    method: 'post',
    url: '/user/12345',
    headers:{

    },
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
  });

关于axios请求方式暂时说道这里，在axios中还有2个方法是非常重要的，它们就是拦截器。
请求拦截器：axios.interceptors.request.use(fn)

axios.interceptors.request.use(
  config => {
    config.headers['X-Auth-Token'] = cookieVue
    config.headers['Content-Type'] = 'application/json' 
    return config
  },
  error => {
    alert('请求超时，请稍后重试！')
    return Promise.reject(error)
  }
)

响应拦截器：axios.interceptors.response.use(fn)

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

axios请求数据格式

在axios中请求的数据格式大致为以下几种

• JSON（application/json)
• formdata（application/x-www-form-urlencode）
• params

其中，axios默认的请求方式是json。所以在我们请求数据时，有时由于后端需要的是formadata形式，所以，我们需要进行Headers的设置。当然还有一点非常重要，在进行formadata设置时，一般使用qs库进行请求数据格式的转换。

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Jquery $.ajax()

$.ajax()是封装ajax的另外一种方式，它和axios一样返回的也是promise对象。

$.ajax({
    type:'get/post',
    url:'',
    dataType:'json',
    data:data,
    headers:{

    },
    beforeSend:function(res){
        res.setRequestHeader('Content-Type','')
    }
})

以上是一种常用的请求套路。

写在最后：跨域请求处理？

除了以上第一种jsonp能够直接处理跨域之外，其它几种方法都得设置相应的 条件

• $.ajax()

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {}
});

Jq可以通过类似jsonp的请求方式，设置一个回调函数来实现。

• axios

 module.exports = {
  publicPath: "/",
  devServer: {
    proxy: {
      "/api": {
        // 代理名称   凡是使用/api开头的地址都是用此代理
        target: "http://localhost:4000/", // 需要代理访问的api地址
        changeOrigin: true, // 允许跨域请求
        pathRewrite: {
          // 重写路径，替换请求地址中的指定路径
          "^/api": "/", // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
        },
      },
    },
  },
};

Axios可以通过设置proxy代理实现跨域。