jquerAjax Fetch axios 以及跨域

jquerAjax Fetch axios 以及跨域

常用ajax请求库

1、jQuery 比较重，需要外部引用不建议使用

2、axios 轻量级，建议使用

3、fetch 原生函数，但老版本浏览器不支持

1、jqueryAjax

   // ajax发送请求
    //    $.ajax({
    //        url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
    //        type:"get",
    //        dataType:"json",  将数据转换成json格式
    //        success:(res)=>{
    //           this.setState({
    //               arr:res.data.commentList
    //           })
    //        }
    //    })

### 2、 Fetch

// fetch发送数据请求
    // fetch("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
    //    {method:"get"})
    //     .then(req=>req.json())  将数据转换成json格式
    //     .then((ok)=>{
    //         console.log(ok)
    //         this.setState({
    //             arr:ok.data.commentList
    //         })
    //     })

post

发送post

fetch("地址", {
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: "key=val&key=val"
    })
    .then(req=>req.json())
    .then(function(ok) {console.log(ok)})

### 3、 axios请求
1）封装 api 

import axios from "axios"
export  function axiosdemo(){
  
    return new Promise((resolve,reject)=>{
        axios.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187")  
            .then((ok)=>{
                resolve(ok)
            }).catch((err)=>{
                reject(err)
            })
    })      
}

调用

import {axiosdemo} from "../api/axiosdemo"
//    axios发送数据请求
        axiosdemo().then((ok)=>{
            console.log(ok)
            this.setState({
                arr:ok.data.data.commentList
            })
        }).catch((err)=>{
            console.log(err)
        })

## 跨域
正向代理配置--可以请求中国天气网http://www.weather.com.cn/data/cityinfo/101320101.html

1.找到项目目录下/node_modules/react-scripts/config/webpackDevServer.config.js

2.然后在其中找到proxy                                 并修改成如下：

proxy:{
        "/api（可以随便写）":{
             target:"请求地址",
             changeOrigin:true,
             "pathRewrite":{
               "^/api（和上面一样）":"/"
             }
        }
    },

3.并修改请求地址

export  function weather(){

    return new Promise((resolve,reject)=>{
        axios.get("/api/data/cityinfo/101320101.html")  
            .then((ok)=>{
                resolve(ok)
            }).catch((err)=>{
                reject(err)
            })
    })      
}