Help us understand the problem. What is going on with this article?

javascript知見

シリーズ

物理・数学・プログラムのページについて

概要

javascriptについてわかったことなどをまとめていこうと思います。
参考

関数について


normalFunc()とarrowFunc1()は全く同じということではなくてthisの振る舞いが異なる点に注意。
参考
// 普通の関数の書き方1
function normalFunc1(x, y){
  return x * y;
}

// 普通の関数の書き方2
const normalFunc2 = function(x, y){
  return x * y;
}

// アロー関数1
const arrowFunc1 = (x, y) => {
  const ret = x * y;
  return ret;
}

// アロー関数2 --中身が1行の時
const arrowFunc2 = (x, y) => return x * y;

// アロー関数3 --中身が1行 & 引数が1つの時
const arrowFunc3 = x => return 10 * x;

// 実行
console.log(normalFunc1(1,2));
console.log(normalFunc2(1,2));
console.log(arrowFunc1(2,3));
console.log(arrowFunc2(3,4));
console.log(arrowFunc3(1));

promiseの例

参考

この、resolve()reject()の意味がわからない。
どうしてここに書くのか...
function hidouki2() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      //成功時
     resolve('非同期成功');
      // 失敗時
     // reject(new Error('Error'));
    }, 5000);
  });
}

hidouki2().then(function (value) {
  console.log(value);
}).catch(function (error) {
  console.log(error);
});

promiseとjqueryを用いたajaxの方法

参考1参考2
今回の勉強を通して、ショックを受けました。いかに自分が勉強不足だったか。そしてこんなにも楽に綺麗に非同期処理が書けるのかと!
もっと勉強しよう!!!と思いました。

$.ajax({
  オプション
})
.then(成功時の処理, 失敗時の処理);

$.ajax({
  url: "http://jsrun.it/assets/E/H/Z/t/EHZt3"
}).then(
  // 1つめは通信成功時のコールバック
  function (data) {
    $("#results").append(data);
  },
  // 2つめは通信失敗時のコールバック
  function () {
    alert("読み込み失敗");
});

または

$.ajax({
  url: 'http://jsrun.it/assets/E/H/Z/t/EHZt3'
})
.then(
  data => $('#results').append(data),
  error => alert('読み込み失敗')
);

then()をメソッドチェーンすると、ajaxで1つ目の結果を用いて2つ目のajaxを行うといったことがコールバック地獄なしで行える。これはすごい!!!!!!!!!!!(これはpromise()then()!?)
var hoge;
var fuga;
$.ajax("a.html")
.then(function(_hoge) {
  hoge = _hoge;
  return $.ajax("b.html");
})
.then(function(_fuga) {
  fuga = _fuga;
  return $.ajax("c.html");
})
.then(function(piyo) {
  console.log(hoge + piyo + fuga);
});

次は並列処理。複数のajaxを同時に行い、全て揃ったら実行される(これはpromiseall()!?)
$.when($.ajax('a.html'), $.ajax('b.html'), $.ajax('c.html'))
  .done(function(hoge, fuga, piyo) {
  // do something
});

jqueryのajaxで画像を送信する方法

サーバー側

if($_FILES) {
    $input_file = $_FILES;
    // echo json_encode($input_file);
    // exit();

    $result = [];
    for ($i=0; $i<count($_FILES['upload_file']['name']) ; $i++) { 
        $img_name = $this->login_member['id'].date("YmdHis").$_FILES['upload_file']['name'][$i];
        $result[] = ['name'=>$img_name];

        // $_SESSION['upload_img'][] = $img_name;
        //画像を仮保存
        move_uploaded_file($_FILES['upload_file']['tmp_name'][$i], DIR_IMG_TMP.$img_name);

    }

    echo json_encode($result);
    exit();

} 

フロント側

$(document).on('click', '#submit', function(e){
    e.preventDefault();

    let formData = new FormData($('#imgForm').get()[0]);
    $.ajax({
        url:URL,
        type: 'post',
        processData: false,
        contentType: false,
        data: formData,
        success: console.log('send!')
    })

    .done( (data) => {
        console.log('success');
        console.log(data);
    })

    .fail( (data) => {
        console.log('faild');
        console.log(data);

    })

    .always( (data) => {
        console.log('always');
        {* console.log(data); *}

    });
});

よく使うひな形

$.ajax({
    url:'',
    type: 'post',
    //processData: false,
    //contentType: false,
    data: formData,
    dataType: 'json',
    success: console.log('send!')
})
.done( (data) => {

})
.fail( (data) => {
})
.always( (data) => {
});
}

Observable, promise例

参考

<p>observable</p>
const locationsSubscription = locations.subscribe({
  next(position) { console.log('Current Position: ', position); },
  error(msg) { console.log('Error Getting Location: ', msg); }
});

<p>promise</p>
hidouki2().then(function (value) {
  console.log(value);
}).catch(function (error) {
  console.log(error);
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした