第三方包 vue-resource

Posted 2021-12-02 xixiaijunjun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三方包 vue-resource相关的知识，希望对你有一定的参考价值。

使用 vue-resource 发起 get post jsonp 请求

注意：

假设当前服务器后台监听的端口是 7000

1，get post 既可以请求数据，也可以发送数据

2，请求的是服务器所在的 url 路径（http://localhost:7000/add），当然，如果你的客服端也是由 node 后台直接读写文件返回的 html 文件。那么证明该 html 页面也是放在该和后台监听的同一个端口下面。就可以不写全请求的url（如：/add 注意：那么就相当于请求; http://localhost:7000/add）

3 , jsonp 是用 script 标签来完成跨域请求的（请求 url,然后返回 res.end(‘cb(data))‘）由html里面书写 js 函数自行操作

注意：form 表单提交数据，如果在 <input type=‘submit‘> 中添加点击事件，那么 form 表单提交的数据就不会在 url 处自动拼接数据（/add?id=&name=）。拼接后是会有数据的（/add?id=123&name= zhangsan）

Vue.http.get(‘/someUrl‘, [config]).then(successCallback, errorCallback);
Vue.http.post(‘/someUrl‘, [body], [config]).then(successCallback, errorCallback);
?
// in a Vue instance
this.$http.get(‘/someUrl‘, [config]).then(successCallback, errorCallback);
this.$http.post(‘/someUrl‘, [body], [config]).then(successCallback, errorCallback);
?
?
 this.$http.jsonp(‘https://suggest.taobao.com/sug?q=笔&callback=sug‘).then(function (result) {
                console.log(result);
                console.log(result.body);
              })

List of shortcut methods:

get(url, [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
post(url, [body], [config])
put(url, [body], [config])
patch(url, [body], [config])

Config

Parameter	Type	Description
url	`string`	URL to which the request is sent
body	`Object`, `FormData`, `string`	Data to be sent as the request body
headers	`Object`	Headers object to be sent as HTTP request headers
params	`Object`	Parameters object to be sent as URL parameters
method	`string`	HTTP method (e.g. GET, POST, ...)
responseType	`string`	Type of the response body (e.g. text, blob, json, ...)
timeout	`number`	Request timeout in milliseconds (`0` means no timeout)
credentials	`boolean`	Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP	`boolean`	Send PUT, PATCH and DELETE requests with a HTTP POST and set the `X-HTTP-Method-Override` header
emulateJSON	`boolean`	Send request body as `application/x-www-form-urlencoded` content type
before	`function(request)`	Callback function to modify the request object before it is sent
uploadProgress	`function(event)`	Callback function to handle the ProgressEvent of uploads
downloadProgress	`function(event)`	Callback function to handle the ProgressEvent of downloads

1. get post jsonp三种请求方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title></title>
    <script type="text/javascript" src="../vue.js"></script>
    <!-- 注意：vue-resource 依赖于 Vue,所以要注意加载顺序 -->
    <script type="text/javascript" src="../vue-resource.min.js"></script>
?
</head>
<body>
    <div id="app">
        <input type="button" name="" value="get请求" @click=‘getInfo‘>
        <input type="button" name="" value="post请求" @click=‘postInfo‘>
        <input type="button" name="" value="jsonp请求" @click=‘jsonpInfo‘>
    </div>
?
?
<script type="text/javascript">
?
?
?
    new Vue({
         el:‘#app‘,
         data:{},
         methods:{
             
            getInfo() {
              this.$http.get(‘https://api.apiopen.top/singlePoetry‘).then(function (result) {
                console.log(result.data);
              })
            },
             
            /*
            三个参数：
              参数1：url请求路径 
              参数2：{body}请求体内容
              参数3：config 配置项 比如设置（application/x-www-form-urlencoded）
                    提交数据的方式。
            
            */
            postInfo() {
              this.$http.post(‘https://api.apiopen.top/singlePoetry‘,{发送的数据},{emulateJSON:true}).then(function (result) {
                console.log(result);
              })
            },
            jsonpInfo() {
              this.$http.jsonp(‘https://suggest.taobao.com/sug?q=笔&callback=sug‘).then(function (result) {
                console.log(result);
                console.log(result.body);
              })
            }
         }
    });
?
?
</script>
</body>
</html>

###

node 仿 jsonp 请求

跨域请求

注意：服务端返回形式是当你客户端发起请求时，服务端以 res.write() 的形式返回给客户端的

跨域请求的 script 标签中（以字符串的形式）

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title></title>
    
</head>
<body>
?
?
<script type="text/javascript">
    function showInfo(data) {
        console.log(data);
    }
</script>
?
<script src="http://127.0.0.1:8000/getscript?callback=showInfo"></script>
?
</body>
</html>

服务端

const http =require(‘http‘);
const url = require(‘url‘);
const querystring = require(‘querystring‘);
?
http.createServer((req,res)=>{
?
  // const url = req.url;
  // var myURL = url.parse(‘https://user:[email protected]:8080/p/a/t/h?query=string#hash‘);
  // console.log(myURL);
  // var querystr = querystring.parse(myURL.query);
  // console.log(querystr);
?
   const getURL = url.parse(req.url,true);
?
   console.log(getURL);
?
  if(getURL.pathname === ‘/getscript‘) {
      
      var data = {
        name:‘little‘
      };  
      var scriptStr = `${getURL.query.callback}(${JSON.stringify(data)})`;
?
      res.end(scriptStr);
  }
  else {
    res.write("console.log(‘not found‘);");
    res.end();
  }
?
}).listen(8000,()=>{
    console.log(‘localhost:8000‘);
});

以上是关于第三方包 vue-resource的主要内容，如果未能解决你的问题，请参考以下文章

Vue学习之vue-resource小结

vue系列——数据请求

10天从入门到精通Vue-vue-resourceVue中的动画

终于掉坑里了！！！vue-resource和jquery的ajax不一样

Python的基本库与第三方库

03 (H5*) Vue第三天